Practice & Assessment
Test your understanding of Web APIs: History, URL, Clipboard, and Observers
Multiple Choice Questions
6Which method adds a new entry to the browser history stack without reloading the page?
URL.searchParams.get('q') returns null. What does this mean?
navigator.clipboard.writeText() throws a DOMException. What is the most likely cause?
Which MutationObserver option must be set to true to also observe changes in descendant elements, not just the direct target?
An element resizes because a sibling element changes size in a flex container. Which API detects this?
What does the popstate event NOT fire for?
Coding Challenges
1SPA Tab Router with URL Sync
Build a tabbed interface with three tabs (Home, About, Contact) as buttons. Clicking a tab shows the corresponding content panel and updates the URL to /?tab=home, /?tab=about, etc. using history.pushState. On page load, read the tab query param with the URL API and activate the correct tab. The Back and Forward browser buttons must correctly switch tabs by listening to popstate. Input: tab button clicks and browser navigation. Output: correct content visible with matching URL. Constraint: no page reloads. Estimated time: 25-30 minutes.
Mini Project
Markdown Note Editor with Full Browser API Integration
Build a Markdown note editor integrating all module APIs. Requirements: a textarea editor where text is parsed using a simple regex-based Markdown-to-HTML converter (headings, bold, italic, code) and previewed live in a div. A Copy HTML button uses the Clipboard API to copy the rendered HTML. Notes are saved to localStorage with title and content; the URL updates via pushState to /notes/{id} when a note is opened. The Back button restores the previous note using popstate. A MutationObserver watches the preview div and logs every render. A ResizeObserver on the editor adjusts font-size between compact and full-size classes. All state flows through the Store pattern from Module 5.