The finished task app
The blank task was ignored. Use the app yourself: add, tick, delete, filter, clear done. Every change goes through update, so the page and storage always match the state.
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
2 tasks left
[{"id":1,"text":"Buy milk","done":false},{"id":2,"text":"Write tests","done":true},{"id":3,"text":"Call Asha","done":false}]
[ 'Buy milk', 'Call Asha' ]