Practice & Assessment
Test your understanding of Styles, Classes, and Layout via JavaScript
Multiple Choice Questions
5element.style.color returns an empty string. What does this mean?
Which classList method accepts a second boolean argument to force-add or force-remove a class?
Why is requestAnimationFrame preferred over setInterval for JavaScript animations?
getBoundingClientRect().top returns 0. What does this mean?
When should you use IntersectionObserver instead of a scroll event listener?
Coding Challenges
1Scroll-Triggered Fade-In Gallery
Given 12 image placeholder divs (.gallery-item) styled with opacity:0, use IntersectionObserver with a threshold of 0.3 to add class .visible (opacity:1, transition:opacity 0.4s) when each enters the viewport. Unobserve each element after it becomes visible. Input: user scrolling the page. Output: items fade in as they enter the viewport and stay visible. Constraint: no scroll event listeners. Estimated time: 20-25 minutes.
Mini Project
Animated Sidebar Navigation
Build a collapsible sidebar. Requirements: a hamburger button (#toggle-btn) toggles class .sidebar-open on a #sidebar element using classList. The sidebar slides in via CSS transition (transform: translateX). A dark overlay (#overlay) appears when the sidebar is open; clicking it closes the sidebar. All open/close buttons use event delegation on document. Implement a scroll progress bar (#scroll-bar) at the top of the page: on each scroll event update its width using element.style.width calculated from window.scrollY and document.body.scrollHeight minus window.innerHeight. Use requestAnimationFrame to throttle scroll handler updates.