Build 5: progress bar driven by a fake upload
transform: scaleX animates on the compositor (cheaper than animating width). The bar clamps bad values, exposes aria-valuenow, and the completion message is announced once through a polite live region instead of announcing every step. The effect returns the upload's cancel function as its cleanup.
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
aria-valuenow 0
aria-valuenow 25
aria-valuenow 50
aria-valuenow 75
aria-valuenow 100
Upload complete