What you will use in this project
- DOM manipulation and event delegation
- Persisting state with localStorage
- HTML5 drag-and-drop API
- Composable CSS components
Web Project: Interactive Todo List
Complete each step in the editor and watch the result as your page takes shape.
Build Interactive Todo List, step-by-step
Build a feature-rich todo application.
Add local storage, filters, and drag-and-drop.
How it works
- 1 Follow the steps on the left. Each dot in the stepper bar is one focused chunk of work. Read the instructions, the “What to do” checklist, and any hints.
- 2 Write your code on the right. The editor is yours. Files auto-save as you type. Use the Preview tab to see your work in action.
-
3
Click
Check codewhen you’re ready. We grade your work against the step’s rubric and tell you exactly what passed and what still needs work. - 4 Pass a step to move on. Build the project cumulatively. Pass every step to complete it and earn the full XP.
How it’s graded
This project is broken into 9 steps. Each one has its own pass criterion. Click Check code on every step to verify your progress and earn the full +90 XP.
| # | Step & pass criterion | Weight |
|---|---|---|
| 1 | Sketch the markup Form, input, and list ids present | 15 pts |
| 2 | Filter tabs Three filter buttons present | 15 pts |
| 3 | Model the data todos array declared | 5 pts |
| 4 | Render the list JS renders todos into the DOM | 10 pts |
| 5 | Add new todos Submit handler with preventDefault | 5 pts |
| 6 |
Toggle done and delete
|
25 pts |
| 7 | Persist with localStorage localStorage w3p_todos read and write | 15 pts |
| 8 | Wire the filters Active filter read from click | 5 pts |
| 9 | Drag and drop reorder Draggable plus drop events wired | 5 pts |
