The story page, all modules in one script
The project's files import each other, and the preview cannot run local imports, so this example puts steps.js and main.js into one script. loadDaily is a short stand-in that reads the same CSV (the real one in src/data/load.js also cleans the rows). The last lines drive the page: they scroll to each step and report the active one.
Add a second page to the project: a scrolling story built from the same Lumen data, with the seasons, the August outage and the rise of e-bikes, a list version, reduced motion, and the numbers in the text.
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.
Add a sixth step to the story: "Rain" with a state that shows the 108 rainy days. Say which file you change for the text, which for the state and what else must change for the page's accessibility.
Write a check script for deployment, check-dist.mjs, that fails when dist/story.html or dist/index.html is missing.
Explain it without notes
Why does the story page keep each step's text in the HTML instead of writing it from JavaScript?
Why can a page work under npm run dev and be missing from npm run build?
How does the page behave when the data cannot be loaded, and why?
Preview
Console
Nothing logged yet.Expected console output
status text after loading: ""
scrolled to year -> active step: year
scrolled to seasons -> active step: seasons
scrolled to peak -> active step: peak
scrolled to outage -> active step: outage
scrolled to ebikes -> active step: ebikes
scrolled to seasons -> active step: seasons
table rows: 12
list mode: charts drawn: 5 | sticky chart hidden: true