Homework

Homework — feel the pain

Homework — feel the pain (don't just read about it).

  1. Gather the loose state. At the top of main.js, keep all ~ten variables. Implement toggleFavorite, which changes favorites and re-renders three views (gallery, collection, home counter). While the collection/home don't fully exist yet, replace them with simple console.log/counter updates — the principle is what matters.
  2. Reproduce the silent lie. Add removeFromCollection, which re-renders the collection and the counter but not the gallery. Save a picture, remove it from the collection, go back to the gallery — the ♡ stayed filled. Capture that moment.
  3. "Fix" it by hand. Add the missing renderGallery(). It works now — but only because you remembered. Think: how many more actions have the same requirement?
  4. Count the pairs. Write down every action that changes favorites (toggle, remove, rate, tag…) and every view that shows it. Each action must "reach" each view. That's the number of pairs you have to keep in your head.

Required "tests" (this is a lesson, not a feature):

  • Lie test: you can reproduce the filled ♡ after removing from the collection.
  • Understanding test: you can explain why this is NOT "carelessness" but a structural flaw.

To submit: a short video or photo sequence showing the silent lie (♡ filled though the picture was removed), + 2–3 sentences: why discipline doesn't hold here.

Next. You felt the problem. In lesson 9 — the answer: pub/sub. A single subscribe/notify removes every manual re-render — views update themselves — and favorites gets persisted too (localStorage), so it survives a reload. Pain → tool.