An SVG with no size
An edge case with no error message: a shape outside the SVG's box is simply not drawn.
You write code in two places in this course: the live editor on these pages (nothing to install), and from now on also one file on your own computer, lumen-dashboard/index.html, opened by double-clicking it. In Phase 4 the project moves to a small local server.
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.
On your computer, create lumen-dashboard/index.html from step 2's code, open it, and add a second bar below the first (y = 60). Give the SVG enough height to show it. What height did you use?
In the second example, keep the SVG without a size and move the orange circle so that it is visible but touches the right edge exactly.
Explain it without notes
Where will you write code in Phases 0–3, and where from Phase 4? Why the change?
Your chart on your computer is blank. What is the first thing you do, and how?
Why did the last line of the first example never print?
Preview
Console
Nothing logged yet.Expected console output
Width: 300 Height: 150
Circles in the page: 2