JS: User Events Playground
Learning Goals
- Explore Documentation for User Events
- Get hands-on practice working with User Events
- Get hands-on practice with manipulating the DOM using:
- Query Selectors
- Event Listeners
- Functions
Warm up
Explore this MDN page for Events
Demo
We’ll be using this Codepen for our demo and exercise. Take a moment to open it up.
I want to change the color of the box on click, so that it turns green when I click it once, and back to blue when I click it again.
- What would your pseudocode look like for this process?
When the user clicks the 🔥 button, the image inside of the div should reveal itself.
- What would your pseudocode look like for this process?
Explore
In your small groups, try to accomplish the following tasks, using a forked version of that same CodePen:
- Add a new button with the following functionality:
- Change the background color of the
bodyelement when your new button is clicked.
- Change the background color of the
- When the input detects a
keyupevent, the colored div should grow larger. - When the input detects a
keydownevent the colored div should shrink. - When the box is dragged by the user, it should
console.log()a message of your choice. - When the box detects a
mouseoverevent, it should spin (you can use the spin class in the CSS file). - When the 🔥 button is clicked, the text inside of it should change to 💦, and it should change back to 🔥 when clicked again.
- Your choice: What other events can you use? What other results can you create?
Wrap Up
- What is the general process for manipulating DOM nodes / HTML elements with JavaScript?
- Which events seem the most useful? Which seem the most niche?
- What questions do you still have?
