Pocket Notes

Store small, non-sensitive notes in the browser and keep storage code separate from page code.

Pair this exercise with the JavaScript notes.

Start your own copy

1. On GitHub, click Use this template → Create a new repository.
2. Choose whether your repository will be public or private.
3. Clone your new repository, then make changes in your own copy.

Lesson milestone: Session 6 — ES modules, JSON, localStorage, and safe text rendering

Time-box: 75–90 minutes

Dependencies: none

Run it

This project uses browser modules, so do not open index.html with file://.

python3 -m http.server 8000

Open http://127.0.0.1:8000/.

Build steps

1. Finish loadNotes and saveNotes in storage.js.
2. Import them into main.js and keep notes in an array.
3. Add a note object from the form, save, then render.
4. Remove a note through the list click listener, save, then render.
5. Recover to an empty list if stored JSON is missing or malformed.

Acceptance checklist

• A note has an id, title, body, and creation timestamp.
• Notes remain after reload.
• Removing one note updates both the DOM and localStorage.
• Empty state and save failure have clear messages.
• Malformed stored JSON does not crash the page.
• User text is rendered with textContent.
• No password, token, private message, or other secret is requested.
• main.js imports storage functions with an explicit .js path.

Storage test

In DevTools Application → Local Storage, replace the value of kode-n-vibe-pocket-notes-v1 with broken JSON, then reload. The app should recover instead of showing an uncaught error.

localStorage belongs to this browser and origin. It is not encrypted, synced, or suitable for secrets.

Retest missing, valid, and malformed stored data before considering the exercise complete.

Get your automatic project grade

1. Create your own copy from this template.

2. Read MASTERY.md, then create an attempt branch:

   git switch -c attempt/my-project

3. Build the project and run the same check GitHub uses:

   node --test test/mastery.test.mjs

4. Commit and push the attempt branch:

   git add .
   git commit -m "Complete project attempt"
   git push -u origin attempt/my-project

GitHub Actions grades every pushed attempt automatically. PASS — NAILED IT means every required check passed. REVISE — KEEP BUILDING means the run shows what to fix before you push again. You do not need the KODE Ń VIBE owner to review or start anything; the template's main branch stays quiet on purpose.

The free grading guide explains the result and its limits.