Steps 1 and 2: state and pure updates, tested in the console
Every update returned a new array and left the old one alone. After deleting task 1 the next id is 3, so ids are never reused while the list exists.
The capstone builds a complete task app in plain JavaScript with one clear shape: a single state object, pure functions that compute new state, one render function that draws the page from state, delegated event listeners, and localStorage so tasks survive a reload.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a pure function clearDone(tasks) and a stats(tasks) that returns { total, done, left }. Test both.
Write editTask(tasks, id, text) that trims the text, removes the task if the text is empty, and otherwise updates its text immutably.
Explain it without notes
Describe the architecture of the task app and why each piece exists.
Why use event delegation on the list instead of a listener per button?
What can go wrong when loading from localStorage, and how does the app handle it?
How would you add syncing to a server without rewriting the app?
Preview
Console
Nothing logged yet.Expected console output
[ { id: 1, text: 'Buy milk', done: true }, { id: 2, text: 'Write tests', done: false } ]
[ 'Write tests' ] [ 'Buy milk' ]
[ { id: 2, text: 'Write tests', done: false } ] 3
false false true