Practice & Assessment
Test your understanding of Adding Interactivity with JavaScript
Multiple Choice Questions
6Why should IntersectionObserver be used for scroll animations instead of a scroll event listener?
What is the correct attribute to update on a hamburger button when the menu opens and closes?
In the dark mode implementation, why is localStorage checked before prefers-color-scheme?
What does the rootMargin: '-80px 0px 0px 0px' option do in the section-tracking IntersectionObserver?
What is the purpose of calling observer.unobserve(entry.target) inside the IntersectionObserver callback?
Why is e.preventDefault() called at the start of the contact form submission handler?
Coding Challenges
1Implement Dark Mode Toggle with System Preference Detection
Add a working dark mode toggle to an HTML portfolio page. Requirements: (1) Define light and dark CSS custom properties using [data-theme='dark'] selector. (2) On page load, apply dark theme if localStorage has 'dark' stored OR if prefers-color-scheme is dark and no localStorage value exists. (3) A toggle button must switch themes and save the preference to localStorage. (4) All color properties in the page (background, text, borders) must use the custom properties so they change with the theme. Input: existing portfolio HTML page. Output: functional theme toggle with persisted preference. Estimated time: 20–25 minutes.
Mini Project
Interactive Portfolio With All JS Features
Extend your static portfolio from Module 2 by adding all four JavaScript features: (1) a hamburger menu that toggles with aria-expanded and closes on link click, (2) a dark mode toggle with localStorage persistence and system preference fallback, (3) IntersectionObserver fade-in animations on section headings and project cards with unobserve after first trigger, and (4) a working contact form with client-side validation and Formspree submission. Additionally, implement the active nav link highlight using a section-tracking IntersectionObserver. All features must work on mobile at 375px width.