The Lumen Bikes dashboard after Phase 1
This is the whole lumen-dashboard/index.html after Phase 1, exactly as in the Files section. Make the preview narrow and wide to watch the week chart scale. No imports are needed: this phase uses plain SVG and CSS.
Rebuild the dashboard frame so it fits any screen: a header with a bike icon made of paths, three titled boxes, and the week chart in a viewBox that scales from a phone to a wall screen. It answers Priya's request for a sharp, fitting dashboard.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a fourth box with id status and a heading, Live station status, labelled the same way (aria-labelledby). Where does its <h2> need an id?
The week chart's viewBox is 0 0 380 210. If its box is 190 pixels wide, what are the chart's height and scale? And at 760 pixels?
Explain it without notes
What changed in the week chart's <svg> tag, and why does that fix the phone problem?
How is the bike icon drawn, and why is it defined as a <symbol>?
What is still missing from the dashboard, and which phases add it?
Preview
Console
Nothing logged yet.Expected console output
Bars: 7
Tallest bar: 160 (Tuesday)
Chart shape (height / width): 0.553 at any size
Titled boxes: 3