Practice & Assessment
Test your understanding of DOM Manipulation and Events
Multiple Choice Questions
5What does document.querySelector() return when no element matches the selector?
What does event.preventDefault() do?
What is event delegation?
Which method adds a CSS class to a DOM element?
What does element.remove() do?
Coding Challenges
1Live Character Counter
Build an HTML page with a textarea and a character counter below it. As the user types, update the counter in real time. Set a maximum of 280 characters. When the user exceeds 200 characters, turn the counter text orange. When they exceed 280, turn it red and prevent additional characters from being entered.
Mini Project
To-Do List Application
Build a fully functional to-do list app. Include an input field and an Add button to create tasks. Render each task as a list item with a checkbox and a delete button. When the checkbox is checked, apply a strikethrough style. Clicking delete removes the item. Add a filter bar with three buttons: All, Active, Completed. Show the count of remaining tasks. Use event delegation for the task list. Store no data persistently yet — that comes in Module 8.