Homework

Homework — your key and your data

Homework — your key and real data.

  1. Create js/api.js with request() (with the response.ok check) and fetchPictures(days). Add formatDateParam to utils.js. Make main.js an async load().
  2. Load real pictures. Serve it and check: "Loaded 14 pictures. Newest: …". That's real NASA data now.
  3. Get your own key. api.nasa.gov → sign up (free) → put your key in config.js instead of DEMO_KEY. Now reload as much as you like — the limit won't bite.
  4. Reproduce the response.ok trap. Temporarily break the URL (e.g. apodapodX). With the response.ok check you get a clear "The API returned 404". Comment the check out — you get a cryptic JSON parse error (because you're reading an error page as JSON). Restore the check.

Required tests:

  • Load test: with a working key you see real pictures.
  • response.ok test: a broken URL gives a clear status, not a JSON crash.

To submit: screenshots: (1) "Loaded … Newest: …" with your key, (2) The API returned 404 with a broken URL.

Next. We have real data — but only as text. In lesson 5 we arrange it into a gallery: many cards in a grid, efficiently (DocumentFragment), with lazily-loaded images (IntersectionObserver).