The Lumen Bikes dashboard after Phase 0
This is the whole lumen-dashboard/index.html after Phase 0, exactly as in the Files section. Make the preview narrow to see the boxes stack.
Turn your index.html into the first page of the Lumen Bikes dashboard: a header, three boxes, and last week's rides as seven bars you size by hand. It answers Tomás's first question: how did last week go?
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 each day's number above its bar (for example "2,979" above Monday), centred, 6 pixels above the bar's top.
Add a fourth box with id status that says "Live station status: Phase 16". Where in the HTML does it go so it appears last?
Explain it without notes
How was each bar's height worked out, and why is Tuesday exactly 160?
Why is a bar's y equal to 180 minus its height?
What can the dashboard do now, and what is still missing?
Preview
Console
Nothing logged yet.Expected console output
Bars: 7
Tallest bar: 160 (Tuesday)