Homework
Homework — events without the traps
Homework — events without the traps.
- Make the card interactive. Add
createFavButtonwithe.stopPropagation()and a card click. While there's nonavigate/toggleFavorite, replace them with a temporaryconsole.log('open', pic.date)andconsole.log('fav', pic.date). - 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. - Reproduce trap 2. Make a small form with one field and a button. Add a
submitlistener WITHOUTpreventDefault— on submit the page reloads (a?appears in the URL). Adde.preventDefault()— no more reload. - Keyboard. Create
shortcuts.js, registerg(log "gallery") and/(focus the search field). Check:/inside the field types a slash instead of hijacking the action.
Required tests:
- Bubbling test: ♡ with
stopPropagationdoesn't open the card; without it — it does. - preventDefault test: the form with
preventDefaultdoesn'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.