Build 4: stopwatch that doesn't drift
Time is computed from timestamps, not by counting ticks: intervals drift and are slowed in background tabs. The interval only triggers repaints and is cleaned up when stopped. Laps are an append-only list, so the index key is safe here. aria-live="off" stops screen readers announcing every 30 ms.
A machine coding round asks you to build a small working UI (tabs, a star rating, nested comments, a file explorer, a stopwatch, a progress bar, pagination) in 45–90 minutes; you pass by clarifying first, planning the state shape, building a working skeleton, then adding behaviour, accessibility and polish while you talk through your choices.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a Pagination component that receives page, pageCount and onChange, renders Prev, page numbers and Next, disables Prev/Next at the ends, and marks the current page with aria-current="page".
Write the recursive Node component for the file explorer state plan above.
Explain it without notes
Walk through how you approach a 60-minute machine coding round, step by step.
How would you design the state for a file explorer with expand and collapse?
What makes a tabs component accessible?
Why build a stopwatch from timestamps instead of counting interval ticks?
Preview
Console
Nothing logged yet.Expected console output
button after stop: Start
time is between 0.2 s and 1 s: true
frozen while stopped: true
after reset: 00:00.00