Homework — your search.

1. Add a search field to index.html (<input type="search" id="search">).
2. Add debounce to utils.js and wrap the input listener with it in main.js. Add searchQuery and visiblePictures().
3. Check filtering. Type text — the grid narrows; clear it — everything returns; type something absent — "No pictures match…".
4. Measure debounce. Put console.count('render') in render(). With debounce, typing "andromeda" shows ~1 "render"; without it — ~9. That's debounce's payoff in numbers.
5. Extra: make the search match the explanation too, not just the title.

Required tests:

• Filter test: search narrows the grid, an empty result shows a message.
• Debounce test: console.count confirms one render with debounce, not one per keystroke.

To submit: screenshots: (1) the filtered grid, (2) console.count with/without debounce (the difference in numbers).

Next. We have four loose variables and one view. In lesson 8 — the breaking point. When the same data is needed by THREE views, and there are ten variables, "don't forget to re-render them all" becomes an impossible discipline. We'll feel that pain — and only then understand what the pub/sub in lesson 9 solves.