hard Frontend Apps ALL 3

Build a To-Do List App

The Brief

Build a fully working to-do list app. Users should be able to type a task, add it to the list, mark tasks as complete (struck through), and delete tasks. Show a count of how many tasks are still incomplete. Pressing Enter in the input box should add the task — they shouldn't have to click the button.

Acceptance Criteria

Tap a criterion to mark it off as you work. Tap a category header to expand or collapse.

1 Page has an input with id task-input

2 Page has a button with id add-btn

3 Page has a ul with id task-list

4 Page has an element with id task-count for the counter

5 Clicking Add appends a new li to the task list

6 Empty input does not add a task (validation)

7 Input is cleared after adding a task

8 Pressing Enter in the input also adds the task

9 Clicking a task toggles it complete (e.g. line-through)

10 Each task has a delete button that removes it

11 Counter shows number of incomplete tasks and updates live

💡 Hints 0 / 5

Guest Mode Attempt freely, or log in to earn EXP & CodeCoins.

index.html

Live Preview