Mini build: a to-do list with done, delete and clear
Build a to-do list that starts with two to-dos: Learn events (done) and Learn state (not done).
Each to-do is an <li> in <ul id="todos"> with its text in <span className="text">, a button with className="toggle" that flips done/not done, and a button with className="delete". A done <li> has the class done.
A form with input id="new-todo" adds a to-do (not done) at the end and empties the input; empty text adds nothing. A paragraph id="left" shows how many are not done, like 1 left. A button id="clear" removes every done to-do.
Store the to-dos as one array of objects { id, text, done } and never mutate it or its objects. Work out the left count during render instead of storing it.
What Check tests
- It starts with two to-dos,
Learn eventsmarked done, and1 left - Adding
Learn hooksputs it at the end, empties the input and shows2 left - Empty text adds nothing
- Toggling
Learn statemarks it done and shows1 left - Clear done removes both done to-dos
- Delete removes the last to-do and shows
0 left - No mutation: no
push,spliceor.done =in the code
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.