Frontend Master

JavaScript Curriculum

Capstone — Todo App
+120 XP

Capstone — Todo App

hard
~60 min·120 XP

The coffee shop manager needs a task tracker for daily prep work. It needs to work offline, sync with the server when online, animate nicely, and never lose data. Every Chapter 02 skill has a place in this app.

Capstone — Build a Todo App

Every Chapter 02 skill has a home in this app. This is not a toy — it is a real, production-quality task tracker that works offline, syncs with a server, and handles errors gracefully.

Your Skill Checklist

Track every Chapter 02 skill as you implement it:

capstone-checklist.js0/18 · 0%
💡Build in layers
1. HTML structure first. 2. Basic add/remove with DOM. 3. Event delegation. 4. localStorage persistence. 5. Fetch for initial data. 6. Error handling. 7. Animations. 8. Clipboard. Build one layer at a time — test each before moving on.

Live Todo App

The fully working app — explore every feature before building your own:

todo-app.js2 remaining
Build the coffee shop menu page
Add event delegation to card list
Persist cart with localStorage
Animate cards with IntersectionObserver
ℹ️Event delegation is the core pattern
One click listener on the `<ul>` handles toggle, delete, and copy for every todo — including ones added dynamically. Use `e.target.closest('[data-id]')` to find the todo element, then `e.target.classList.contains('delete-btn')` to know which action to take.

Chapter 02 Complete

Every DOM and Browser API skill — all 20 lessons:

🏆
Chapter 02 — DOM & Browser APIs
20 lessons · the complete browser programming toolkit
1,200+ XP
total available
20/20 lessons complete

You can script any browser behaviour. Chapter 03 → React is next.

Your Challenge

Build the Todo App from scratch. All 18 checklist items must be ticked. Core features: add todos with validation, toggle complete, delete, filter (all/active/completed), persist to localStorage, fetch initial todos from https://jsonplaceholder.typicode.com/todos?_limit=5, animate new items with IntersectionObserver, copy todo text with Clipboard API.

Challenge

Build the complete Todo App. All 18 checklist items must be ticked before you submit. Requirements: DOM manipulation, event delegation, form handling with validation, localStorage persistence, fetch for initial data, try/catch error handling, IntersectionObserver animation, and Clipboard API copy button.

capstonetodo-appdom-manipulationevent-delegationlocalstoragefetchasync-awaiterror-handlingintersection-observerclipboardform-validationfull-app
Capstone — Todo App | Nexus Learn