Day 5: Event Delegation & Week 6 Mini-Project

Daily Objective

Master event bubbling and delegation, suppress default actions with preventDefault(), and build the interactive To-Do App.

1. Event Delegation

Instead of attaching listeners to 100 list items, attach one listener to the parent <ul> and check event.target:

document.querySelector('#todo-list').addEventListener('click', e => {
  if (e.target.matches('.delete-btn')) {
    e.target.closest('li').remove();
  }
});

---

Week 6 Mini-Project: Interactive To-Do List

Project Requirements:

1. An input field and “Add Task” button.
2. Clicking Add (or pressing Enter) creates and appends a new task item with a checkbox and delete button.
3. Checking the checkbox marks the task as completed (strikes through text).
4. Clicking delete removes the task from the DOM using event delegation.