js/utils.js + js/api.js — pagalbininkas ir tinklo sluoksnis

Du failai kodo stulpelyje kaip skirtukai: js/utils.js (mažas modify — vienas naujas pagalbininkas) ir js/api.js (naujas). api.js taisyklė: tik šis failas kalba su API. Visa kita programa kviečia fetchPictures(days) ir nežino apie fetch, URL ar raktus. Vienas sluoksnis — vieną kartą pakeisi API ir nieko kito liesti nereikės.

fetchPictures suskaičiuoja datų intervalą, sudaro URL su raktu ir kviečia bendrą request(). request() — vienintelė vieta, kur tikrinamas atsakymas.

Pirma — utils.js skirtukas: vienas datos pagalbininkas, kurio reikia api.js (API laukia YYYY-MM-DD). Visa kita faile lieka; diff parodo tik šį papildymą:

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

Dėmesio centre — request():

async function request(url) {
  const response = await fetch(url);
  if (!response.ok) {                       // ← BE ŠITO klaida praeitų tyliai
    throw new Error(`The API returned ${response.status}`);
  }
  return response.json();
}

response.ok yra true, kai statusas 200–299. Jei serveris grąžina 404 ar 500, fetch neišmeta klaidos — await fetch(...) tiesiog grąžina atsakymą su ok === false. Jei to nepatikrinsi ir iškart darysi response.json(), bandysi klaidos puslapį (dažnai HTML) analizuoti kaip JSON ir gausi paslaptingą „Unexpected token <" klaidą.

Patarimas. Kodėl data.reverse() gale? NASA grąžina nuotraukas nuo seniausios. Galerijoje norim naujausią viršuje, tad apverčiam. Smulkmena, bet tokie „duomenų sutvarkymai" priklauso API sluoksniui — likusi programa gauna jau paruoštą tvarką.

utils.js MODIFIKUOTI 5 eilutės pakeistos

Redaguok šį failą kataloge 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 SUKURTI

Sukurk šį failą kataloge 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
}