Capstone part 1: add, tick and delete tasks
Build the core of the task app from Topic 15.8. The HTML is ready; write the JavaScript with one state array, pure update functions, **one render() and delegated events**.
1. Submitting the form adds a task with the trimmed text. Blank text adds nothing. After adding, the input is empty again.
2. Each task is an <li> inside #list containing a checkbox with class toggle, the task text, and a button with class delete.
3. Ticking the checkbox marks the task done: its <li> gets the class done and the box stays ticked. Ticking again undoes it. The delete button removes the task.
4. #count shows how many tasks are not done: 1 task left, 2 tasks left, 0 tasks left.
5. Task text is always shown as text: a task called <b>bold</b> shows those characters.
What Check tests
- Submitting the form adds a task
- Blank text adds nothing
- The input is emptied after adding
- Ticking a task marks it done (class and checkbox)
- The counter says how many are left, with 1 task / N tasks
- Delete removes the right task
- Task text is shown as text, not HTML
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.