Practice & Assessment
Test your understanding of DOM Manipulation and Browser APIs
Multiple Choice Questions
6What is the difference between event.target and event.currentTarget?
Why should you not store authentication tokens in localStorage?
When is requestAnimationFrame better than setInterval for animations?
What does event delegation mean?
What does calling querySelector return when no element matches the selector?
What is layout thrashing?
Coding Challenges
1Infinite Scroll Feed
Build an HTML page with a scrollable feed. Use IntersectionObserver to detect when a sentinel div at the bottom enters the viewport. When it does, append 10 more hardcoded card elements to the feed and move the sentinel to the bottom. Use event delegation on the feed container to log the card's data-id when clicked. No libraries. Input: user scroll action. Output: new cards appended. Time estimate: 30 minutes.
Mini Project
Real-Time Search Filter UI
Build a single HTML file with a product search interface. Include a list of 20 hardcoded products each with name, category, and price. Implement: (1) a text input that filters products by name on each keypress using input event and event delegation, (2) category filter buttons that filter by category (use data-category), (3) sort buttons for price ascending/descending that re-render sorted results, (4) persist the active filter and sort state in localStorage so they survive page refresh, (5) animate newly rendered cards using requestAnimationFrame for a stagger-in reveal effect. Use querySelector, createElement, classList, dataset, textContent, and addEventListener. No frameworks or libraries.