js/components/card.js — kortelė rankomis

Dabar — kortelė. Kodo stulpelyje js/components/card.js: createCard(pic) gauna vieno paveikslo duomenis ir grąžina paruoštą <article> elementą.

Skaityk jį kaip receptą: sukuriam article, į jį — header su img, tada body su pavadinimu ir data. Kiekvienas mazgas — createElement, sukonfigūruotas ir appendChild. Funkcija grąžina kortelę, bet jos niekur neįdeda — kur ją pastatyti, sprendžia kviečiantysis (5 pamokoje — galerijos tinklelis).

Trys detalės, į kurias verta atkreipti dėmesį:

img.alt = pic.title — tikras alternatyvusis tekstas. Ekrano skaitytuvai jį perskaito; tai ne dekoracija, o prieinamumas.
img.loading = 'lazy' — naršyklė atsisiunčia paveikslą tik kai jis netoli ekrano. Nemokamas našumo laimėjimas (plačiau — 5 pamokoje).
title.textContent = pic.title — pavadinimas ateina iš API, tad textContent, ne innerHTML.

Patikrink. Laikinai main.js sukurk vieną kortelę su išgalvotais duomenimis ir įdėk į puslapį:

import { createCard } from './components/card.js';
const demo = {
  url: 'https://apod.nasa.gov/apod/image/2312/… .jpg',
  title: 'The Andromeda Galaxy',
  date: '2026-07-11',
};
document.getElementById('app').appendChild(createCard(demo));

Serviruok (python -m http.server) ir atidaryk — turi matyti kortelę su nuotrauka, pavadinimu ir data.

Spąstai (XSS). Įsivaizduok, kad pavadinimą įrašytum per innerHTML:
title.innerHTML = pic.title;   // ❌ pavojinga
Jei koks nors pavadinimas (iš API ar vartotojo) būtų <img src=x onerror="alert(document.cookie)">, naršyklė jį įvykdytų — svetimas kodas tavo puslapyje. Su textContent tas pats tekstas tiesiog parodomas kaip simboliai. Kintantį tekstą visada dėk per textContent. innerHTML palik tik saugiam, tavo paties rašytam HTML.

card.js SUKURTI

Sukurk šį failą kataloge js/components/

// The picture card, built entirely by hand — no template engine, no JSX.
// It's verbose: every element is created, configured, and appended explicitly.
// That verbosity is the point — you can see exactly what the DOM will contain.
// (Interactivity — the ♡ button and click-to-open — arrives in lesson 3;
//  the video case in lesson 6.)

import { formatDateHuman } from '../utils.js';

export function createCard(pic) {
  const card = document.createElement('article');
  card.className = 'picture-card';

  const header = document.createElement('div');
  header.className = 'card-header';

  const img = document.createElement('img');
  img.src = pic.url;
  img.alt = pic.title;          // a real alt — screen readers read it, not decoration
  img.loading = 'lazy';         // native lazy-loading (more in lesson 5)
  header.appendChild(img);
  card.appendChild(header);

  const body = document.createElement('div');
  body.className = 'card-body';

  const title = document.createElement('h2');
  title.textContent = pic.title;     // textContent — NEVER innerHTML for API data
  body.appendChild(title);

  const date = document.createElement('p');
  date.className = 'picture-date';
  date.textContent = formatDateHuman(pic.date);
  body.appendChild(date);

  card.appendChild(body);
  return card;                   // caller decides where to put it
}