Project: Notes app

The app's moving parts

Small as it is, this app has the same architecture as much bigger ones: state, rendering, events and persistence, each with a clear job.

This small app uses every idea from the unit together. The data is an array of { id, text } notes. render() draws that array as list items. The form adds notes. One delegated listener on the list deletes them. localStorage saves the array after every change and loads it at start-up. Each piece is simple; the skill is wiring them in a clean loop.

let notes = load();

function save() { localStorage.setItem("notes:v1", JSON.stringify(notes)); }

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const text = input.value.trim();
  if (!text) return;
  notes = [...notes, { id: Date.now(), text }];
  save(); render(); form.reset();
});

Ids matter for deleting: the button's data-id connects what was clicked to an item in the array. Remember that dataset values are always strings, while Date.now() ids are numbers — compare them as the same type.