Project brief

Build a weather widget, a memo app and an image gallery. The projects combine fetch, localStorage and ES modules.

This is a workbook project in the JavaScript track. It has no single prescribed solution: build it in your own file, test it in the browser or Node, and compare your result with the checklist below.

What you will practise

Fetch
localStorage
Modules

Build it step by step

Fetch a weather forecast from a public API and render the current temperature and conditions.
Show a loading state and an error state for the request.
Build a memo app that saves notes to localStorage and restores them on reload.
Build an image gallery that loads image metadata from a local JSON file and renders a grid.
Split shared helpers into ES modules and import them with type="module".

Stretch goal

Add one feature that is not in the list above, then write down why you chose it and what you had to change. Keep the feature small enough to finish in one sitting.

Before you move on

The project runs without errors in a fresh browser tab or Node process.
Empty, missing and invalid inputs are handled deliberately.
The code is split into small functions with clear names.
You can explain every line you wrote.

Topics: Fetch, localStorage, Modules.

Assignment

Requirements

Handle a failed fetch without leaving the UI stuck on loading.
Validate and escape any user-entered memo text.
Store structured data as JSON, not as comma-separated strings.
Use named exports for shared helpers.

Acceptance checklist

The happy path works end to end.
Invalid input produces a useful message, not a crash.
The code is readable and consistently formatted.
You have tested at least three different inputs.

Submission

Keep the project in a folder named after the project. Include a short README.md with run instructions and one paragraph describing what was hardest.

Weather Widget / Memo App / Image Gallery