Homework

Homework — events without the traps

Homework — events without the traps.

  1. Make the card interactive. Add createFavButton with e.stopPropagation() and a card click. While there's no navigate/toggleFavorite, replace them with a temporary console.log('open', pic.date) and console.log('fav', pic.date).
  2. Reproduce trap 1. Comment out e.stopPropagation() and click ♡ — the console shows both "fav" and "open". Restore it — only "fav" remains. That's bubbling with your own eyes.
  3. Reproduce trap 2. Make a small form with one field and a button. Add a submit listener WITHOUT preventDefault — on submit the page reloads (a ? appears in the URL). Add e.preventDefault() — no more reload.
  4. Keyboard. Create shortcuts.js, register g (log "gallery") and / (focus the search field). Check: / inside the field types a slash instead of hijacking the action.

Required tests:

  • Bubbling test: ♡ with stopPropagation doesn't open the card; without it — it does.
  • preventDefault test: the form with preventDefault doesn't reload the page.
  • "Typing" test: the shortcut doesn't fire while focus is in an input field.

To submit: screenshots or a video: (1) ♡ without navigating to the detail view, (2) the form without a reload, (3) the console showing bubbling (with/without stopPropagation).

Next. The UI is alive, but the data is still fake. In lesson 4, with fetch, we download real NASA pictures — and hit the reality of the network: API keys, rate limits, and errors that don't look like errors.