The project tree, printed from data
A function that calls itself for each child (recursion) walks a tree of any depth. Phase 13's tree layouts work the same way.
Your dashboard will grow into a small project with a clear folder layout: the page, the data, the code for loading data, one file per chart, shared parts and styles. Here is the final layout, what each part is for, and how it grows from a single index.html.
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 third column to the printed tree: the phase in which each item first appears (use 0 for index.html, 4 for package.json and the data, 16 for tests).
In the second example, colour JavaScript files differently from other files (hint: name.endsWith(".js")).
Explain it without notes
Why does each chart get its own file?
What goes in public/data/lumen/, and why is its address kept in one setting?
You fell behind in Phase 6. How do you catch up?
Console
(nothing was printed)Expected console output
lumen-dashboard/ the whole project
├─ index.html the page (today, the only file)
├─ package.json name, commands, libraries (Phase 4)
├─ public/ files served as they are
│ └─ data/ data files
│ └─ lumen/ the CSV and JSON data (Phase 4)
├─ src/ your code
│ ├─ main.js starts the app
│ ├─ data/ load and clean data
│ ├─ charts/ one file per chart
│ ├─ parts/ axis, tooltip, legend
│ ├─ styles/ colours and layout
│ └─ utils/ formatting, config
└─ tests/ chart tests (Phase 16)