Homework

Homework — when the network fails

Homework — handle every state.

  1. Typed errors. Create js/errors.js with AppError and the four errors + toMessage. Rewrite api.js's request() to throw them by status.
  2. Four states. Update renderGallery to handle isLoading / error / empty / loaded. In main.js track isLoading, error, pictures and pass them in.
  3. media_type. Add the video branch to card.js. Load 30 days and find at least one "📹 Video" card.
  4. Reproduce the video trap. Temporarily remove the media_type check (img.src = pic.url always). On a video day you'll see a broken image. Restore the check.
  5. Rate-limit error + Retry. Reload until you hit 429. You should see a clear message ("~30 per hour… get your own key") and a "Retry" button, not a blank screen.

Required tests:

  • States test: you see "Loading", then pictures; with the network stopped — an error with "Retry".
  • media_type test: a video day shows "📹 Video", not a broken image.

To submit: screenshots: (1) a "📹 Video" card, (2) the rate-limit error with a "Retry" button.

Next. The gallery is solid. In lesson 7 we add search-as-you-type — and a new loose variable, searchQuery. We'll learn why re-rendering on every keystroke is wrong, and what "debounce" actually is.