medium JavaScript JS

Todo List

The Brief

Build a working todo list. The user types a task, hits Add, and the task appears in a list. Clicking a task toggles a strike-through (marking it done). Each task has a Delete button that removes it. Empty submissions are ignored.

Acceptance Criteria

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

1 A <div class="todo-app"> container

2 An <input id="task-input" type="text"> for entering new tasks

3 A <button id="add-btn">Add</button> to submit

4 An empty <ul id="task-list"> that JS will populate

5 Clicking Add takes the input value, trims it, ignores empty/whitespace-only input

6 On valid input, append a new <li> to the list containing the task text and a Delete button

7 Clicking the task text toggles a done class on the <li>

8 Clicking the Delete button removes that <li> (and only that one)

9 After adding, clear the input field

10 Container max-width 400px, centred, white background, rounded corners

11 Input + Add button on the same row using flexbox

12 Add button: blue (#3b82f6), white text

13 Each <li>: padding, bottom border, flex row with task text on the left and Delete on the right

14 A <li>.done rule: text-decoration: line-through and grey colour

15 Delete button: red (#ef4444), small, white text

💡 Hints 0 / 4

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

index.html

Live Preview