Step 6: loading that survives missing and broken data
Without the try/catch, the broken value would throw SyntaxError at startup and the whole app would fail to load. Without the Array.isArray check, the wrong shape would crash later in render.
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: 'Saved earlier', done: true } ]
string
[]
[]