Homework

Homework — your router

Homework — your router.

  1. The route table. Create js/router.js with parseRoute, onRoute, navigate and hashchange. Bind routes to views (home, gallery, collection, detail). Add home.js and detail.js if you don't have them.
  2. Back for free. Browse the gallery → a picture's detail → press the browser's Back. It should return to the gallery — with no extra code.
  3. Deep links. Open #/apod/<date> in a new tab (with no data loaded). detail.js must fetch that picture itself and show it.
  4. URL-synced search. url-state.js with getParams/setParams. Search "moon" → the URL becomes #/gallery?q=moon; copy it, open fresh → the gallery is filtered.
  5. Reproduce the replaceState trap. Temporarily change setParams to location.hash = .... Type "moon", press Back 4 times — it deletes one letter at a time. Restore replaceState — Back is normal again.

Required tests:

  • Back test: the browser Back steps through your routes.
  • Deep-link test: #/apod/<date> loads fresh.
  • History test: with replaceState, search doesn't pollute history.

To submit: a video: (1) Back working, (2) a shareable search link in a new tab, (3) replaceState before/after (the history trap).

Next — Part 3. You have a full, working vanilla app. In lesson 15 we point TypeScript at it — and it rejects real, already-present bugs (like pic.hdurl, which videos don't have). That's also when the tooling arrives (Node, npm, Vite) — because TypeScript can't run without it.