Homework — your first card, by hand.

1. Create js/components/card.js with createCard(pic), as in the lesson. The card should have an image (alt + loading="lazy"), a title (<h2>) and a date.
2. Show it. In main.js import createCard, build one card with fake data and appendChild it into #app. Serve it and check.
3. Prove the XSS difference. Set the title to '<b>test</b> <img src=x onerror="alert(1)">'. With textContent you see the literal text (including <b>). Switch it to innerHTML — the <b> renders and onerror tries to run. Switch back to textContent. Never leave innerHTML for dynamic text.
4. Extend the card. Add a short explanation (pic.explanation) via truncate(pic.explanation, 120), so long text doesn't blow up the layout.

Required tests:

• Structure test: the card has an <article> with an image, title and date.
• Security test: with textContent, a "malicious" title is shown as text, not executed.

To submit: screenshots: (1) the card in the browser, (2) the same "malicious" title safely shown as text.

Next. The card exists, but it's dead — clicking does nothing. In lesson 3 we add events: the ♡ button, click-to-open, keyboard shortcuts — and meet the classic "bubbling" trap.