Build a Styled Todo List
Create a todo list where completed items get visually marked — strikethrough and faded. Bridges JS DOM creation to CSS state classes.
Step 1 of 2
Three actions, one shape
A todo list has three actions and the same DOM-state pattern handles all of them:
- Add — read the input, create a new
<li>, append it to the list, clear the input. - Complete — toggle a
completedclass on the clicked item. CSS handles the strikethrough. - Delete — call
.remove()on the clicked item.
Add a single click listener on the <ul> (event delegation) so 'complete' and 'delete' work even for items added later.
Tip
When delegating, use e.target.closest('selector') to find the right ancestor — the user might click the icon inside the button instead of the button itself, and closest() walks up to find the nearest matching element.
Learn more on MDN