Homework
Homework — your router
Homework — your router.
- The route table. Create
js/router.jswithparseRoute,onRoute,navigateandhashchange. Bind routes to views (home, gallery, collection, detail). Addhome.jsanddetail.jsif you don't have them. - 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.
- Deep links. Open
#/apod/<date>in a new tab (with no data loaded).detail.jsmust fetch that picture itself and show it. - URL-synced search.
url-state.jswithgetParams/setParams. Search "moon" → the URL becomes#/gallery?q=moon; copy it, open fresh → the gallery is filtered. - Reproduce the
replaceStatetrap. Temporarily changesetParamstolocation.hash = .... Type "moon", press Back 4 times — it deletes one letter at a time. RestorereplaceState— 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.