An activity to practice adding behaviors and event handling to a simple javascript project.
Inspect index.js which starts with a log statement but doesn't print to the console. Link it to the HTML & show it log in the browser console
Access the DOM to update the img src of the displayed dog on load using a random number.
- Update
onLoadedto do the random picture assignment. - Refactor to look up the needed elements once and store them.
Add a button and onClick to access the DOM to add a new random dog to gallery.
Add a dog image counter to show holding some state.
If there’s time, show infinite scroll to keep loading a random dog image from files.
-
This is just for fun. Go through it quickly. Don't dwell on the scrolling events and attributes used to calculate where the offset is. Students can review later and research.
-
Observe how we can add this functionality in with relatively little impact to the rest of the code due to reusing existing functions.
- Move the inline event handlers to named functions.
- Move the dog logic of the handlers into their own functions (separation of concerns between the event handlers and the dog logic).
- Extract the portions that are related to making a new dog image. We also moved the count incrementer since we want the count to reflect the number of images created, so they should be done together.
- Extract the portions that are related to updating the UI. In a more complex application, refreshing the UI could involve updating many controls. This can be a very complex step!
- Returning to the random image method, extract the portion related to building the img element.