Events & Interactivity

Code

The interactive card — the stopPropagation trap

Now we make the card interactive. In the code column — the updated js/components/card.js: it gains createFavButton (the ♡ button) and a click on the whole card that opens the detail view. Notice the card doesn't know what "open" or "save" actually do — the caller passes handlers in (onOpen, onToggleFavorite). Real state arrives in lesson 8 and a real router in lesson 14; a component that takes callbacks needs neither. Today the point is the event wiring.

Here's the classic bubbling trap. We have two click targets, one inside the other:

card.addEventListener('click', () => {
  if (onOpen) onOpen(pic);      // the whole card
});

btn.addEventListener('click', (e) => {
  e.stopPropagation();          // ← WITHOUT THIS, clicking ♡ ALSO opens the detail view
  if (onToggleFavorite) onToggleFavorite(pic);
});

Trap 1 (stopPropagation). You click ♡. The event fires on the button — but bubbles up to the card, so the card's listener fires too. Result: you save the picture AND the detail view opens. To the user, ♡ "throws" them somewhere. e.stopPropagation() stops the bubbling — the card's listener no longer fires. A real bug, easy to miss until you click exactly the ♡.

Trap 2 (preventDefault). Forms (settings, contact — lessons 11–12) have the same problem in another form:

form.addEventListener('submit', (e) => {
  e.preventDefault();           // ← WITHOUT THIS, the page RELOADS and loses everything
  handleSubmit();
});

A form's default submit behavior is to send the data and reload the page. In a single-page app we never want that: a reload wipes all state. e.preventDefault() stops the browser's default, and we handle the data ourselves.

Verify. Wire the card with temporary handlers — createCard(pic, { onOpen: p => console.log('open', p.title), onToggleFavorite: p => console.log('fav', p.title) }) — then:

1. Click the card (not ♡) → the detail view opens (or logs).
2. Click ♡ → it only saves/removes; the detail view does NOT open.
3. Comment out e.stopPropagation() → now ♡ does BOTH. Restore it — fixed.

Gotcha (recap). stopPropagation stops the event's journey through the DOM (child → parent). preventDefault stops the browser's default action (submit, link). Different problems — don't swap them.

card.js MODIFY 39 lines changed

Edit this file in js/components/

// The picture card — now INTERACTIVE. Two click targets, one nested in the other:
// the whole card opens the detail view, and the ♡ button inside it saves the
// picture. That nesting is the classic bubbling trap this lesson is about.
//
// The card does NOT know what "open" or "save" actually do — the caller passes
// handlers IN (onOpen, onToggleFavorite). Real state arrives in lesson 8 and a
// real router in lesson 14; today's focus is the EVENT wiring.

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

export function createCard(pic, { onOpen, onToggleFavorite } = {}) {
  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);

  header.appendChild(createFavButton(pic, onToggleFavorite));   // the ♡, nested inside the card
  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);

  // Clicking anywhere on the card opens the detail view...
  card.addEventListener('click', () => {
    if (onOpen) onOpen(pic);    // handlers are optional — the gallery may not wire them yet
  });

  return card;                   // caller decides where to put it
}

function createFavButton(pic, onToggleFavorite) {
  const btn = document.createElement('button');
  btn.className = 'fav-btn';
  btn.textContent = '♡';
  btn.title = 'Save to collection';
  btn.setAttribute('aria-label', btn.title);

  btn.addEventListener('click', (e) => {
    e.stopPropagation();          // ...but NOT when you click the ♡ inside it!

    // Flip the visual state. REAL persistence (favorites that survive a
    // reload) arrives with the state store in lessons 8–9.
    const saved = btn.classList.toggle('is-fav');
    btn.textContent = saved ? '♥' : '♡';
    btn.title = saved ? 'Remove from collection' : 'Save to collection';
    btn.setAttribute('aria-label', btn.title);

    if (onToggleFavorite) onToggleFavorite(pic);
  });

  return btn;
}