Build an Idea Capture Board

Scaffold the canvas layout

Create chapters/02/index.html. The page needs a fixed nav bar, a toolbar row, and a full-screen canvas area below. This is a different layout than Chapter 01 — the canvas takes all remaining space.

Build a single HTML page with a dark background (#111). At the
top: a fixed nav bar with links to hub and activity guide. Below
it: a toolbar row with an "+ Add Note" button and 5 color swatches.
Below that: a full-height, full-width canvas div (position:relative,
overflow:hidden) where sticky notes will be placed. No frameworks.
Vanilla HTML, CSS, JavaScript only.

Define the note data model and render one note

Before writing any drag logic, get a single note rendering correctly. Define the object shape first, then ask AI to build the addNote(data) function that creates the DOM element and appends it to the canvas.

A note object has these fields: id (string), color (hex string),
text (string), tag (string), x (number), y (number).

Write an addNote(data) function that creates a div positioned
absolutely on the canvas at data.x, data.y. The note has a
colored header bar (using data.color) showing a label and a
delete button, and a body with a textarea for text and a small
editable tag line at the bottom. Clicking the delete button
removes the note from the DOM.

Add drag-and-drop

This is the most technically interesting phase. Drag behavior in vanilla JS uses three mouse events working together. Walk through the logic before prompting: mousedown records the grab offset, mousemove repositions the note, mouseup drops it and saves the new position.

Add drag-and-drop to each note. When the user mousedown on the
note header, record the offset between the mouse position and the
note's top-left corner. On mousemove (on the document, not just
the note), reposition the note to follow the cursor using that
offset. On mouseup, stop dragging and save the note's new x and y
position to the notes array. The note should not be draggable
by clicking on the textarea or the delete button.

CRUD + localStorage persistence

Now wire up the full data layer: the notes array, save/load from localStorage using JSON, and the color picker in the toolbar. This is the moment the board becomes a real tool — it remembers everything.

Maintain a `notes` array. The addNote function should push new
note objects into the array and call save(). The deleteNote
function should filter the note out and call save(). A save()
function stringifies the array to localStorage. A load()
function on page init reads it back, parses it, and calls
addNote for each entry — restoring the board exactly as left.
If localStorage is empty, load a set of 4-6 default example
notes positioned across the canvas.

Polish, brand it, and publish

Review the board as a first-time user would see it. Consider:

• Is it clear what the color swatches do before you click one?
• Does the board feel responsive — do notes drag smoothly without lag?
• Is there a visual cue when the board is empty vs. populated?
• Are delete actions easy to trigger accidentally? Should there be a confirmation?

Pre-load your own example notes — maybe show-prep items for a project, stream, or brand you're actually working on. Then push to GitHub Pages.