Homework — your gallery.

1. Build the gallery. Add <div id="gallery" class="grid"> to index.html. Create js/views/gallery.js with renderGallery(pictures) (a DocumentFragment). In main.js, on a successful load, call renderGallery(pictures).
2. Prove the fragment's value. Temporarily rewrite it without the fragment (pictures.forEach(pic => gallery.appendChild(createCard(pic)))). With ~30 cards you won't see a difference, but you get the principle; restore the fragment.
3. Turn on the reveal. Create js/observers.js and call revealOnScroll([...]) at the end of renderGallery. Watch the fade-in as you scroll.
4. Reproduce the "watch forever" trap. Comment out observer.unobserve(...). Open "Performance"/"Console" and watch the observer being called nonstop. Restore unobserve.

Required tests:

• Grid test: the gallery shows a card for every picture.
• Reveal test: cards fade in on scroll; with prefers-reduced-motion, they appear instantly.

To submit: screenshots or a video: (1) the gallery grid, (2) the fade-in effect on scroll.

Next. The gallery works — when all goes well. But the network, in reality, fails: there's loading, empty, error. In lesson 6 we handle every state — and the day APOD returns a video instead of a picture.