Fetch & the NASA APOD API

Code

js/utils.js + js/api.js — the helper and the network layer

Two files in the code column, as tabs: js/utils.js (a small modify — one new helper) and js/api.js (new). The rule for api.js: only this file talks to the API. The rest of the app calls fetchPictures(days) and knows nothing about fetch, URLs or keys. One layer — change the API once and nothing else needs touching.

fetchPictures works out the date range, builds the URL with the key, and calls a shared request(). request() is the single place a response is checked.

First, the utils.js tab — one date helper api.js needs (the API expects YYYY-MM-DD). Everything else in the file stays; the diff shows just this addition:

/** Date → "YYYY-MM-DD" (the format the NASA API expects) */
export function formatDateParam(date) {
  return date.toISOString().split('T')[0];
}

The heart of it — request():

async function request(url) {
  const response = await fetch(url);
  if (!response.ok) {                       // ← WITHOUT THIS, an error passes silently
    throw new Error(`The API returned ${response.status}`);
  }
  return response.json();
}

response.ok is true for status 200–299. If the server returns a 404 or 500, fetch does not throw — await fetch(...) just returns a response with ok === false. If you don't check and go straight to response.json(), you'll try to parse an error page (often HTML) as JSON and get a cryptic "Unexpected token <" error.

Tip. Why data.reverse() at the end? NASA returns pictures oldest-first. In the gallery we want newest on top, so we flip it. A small thing, but these "data tidyings" belong in the API layer — the rest of the app receives the order already sorted.

utils.js MODIFY 5 lines changed

Edit this file in js/

// Small pure helpers. No DOM state of their own, easy to reason about.
// We'll add more to this file as the app grows (debounce arrives in lesson 7).

/** Date → "YYYY-MM-DD" (the format the NASA API expects) */
export function formatDateParam(date) {
  return date.toISOString().split('T')[0];
}

/** "2026-07-11" → "7/11/2026" (or "July 11, 2026" when long) */
export function formatDateHuman(dateStr, long = false) {
  const options = long
    ? { year: 'numeric', month: 'long', day: 'numeric' }
    : undefined;
  return new Date(dateStr).toLocaleDateString(undefined, options);
}

/** Cut a long string and add an ellipsis */
export function truncate(str, max) {
  return str.length > max ? str.slice(0, max) + '…' : str;
}

/** Replace an element's contents with a single status message. */
export function showStatus(el, message) {
  el.innerHTML = '';                       // clearing is safe (no user data here)
  const p = document.createElement('p');
  p.className = 'status';
  p.textContent = message;                 // the MESSAGE goes in as text, not HTML
  el.appendChild(p);
}

api.js CREATE

Create this file in js/

// Everything that talks to the NASA API lives here. Nothing else calls fetch().
// (In lesson 6 this file's errors become TYPED, so callers can tell a rate-limit
//  from a network failure. For now, one plain check.)

import { API_KEY, API_URL } from './config.js';
import { formatDateParam } from './utils.js';   // add this helper to utils.js (see prose)

async function request(url) {
  const response = await fetch(url);

  // fetch() only REJECTS on a network failure (offline, DNS, CORS). A 404 or
  // 500 is a "successful" fetch with an error status — so you MUST check
  // response.ok yourself, or you'll try to parse an error page as JSON.
  if (!response.ok) {
    throw new Error(`The API returned ${response.status}`);
  }
  return response.json();
}

/** Fetch the last N days of Astronomy Pictures of the Day */
export async function fetchPictures(days) {
  const end = new Date();
  const start = new Date();
  start.setDate(end.getDate() - (days - 1));

  const url = `${API_URL}?api_key=${API_KEY}` +
    `&start_date=${formatDateParam(start)}` +
    `&end_date=${formatDateParam(end)}`;

  const data = await request(url);
  return data.reverse();          // the API returns oldest-first; we want newest-first
}