We started adding event listeners to the divs on the DOM. Now it's your turn to add additional event listeners.
- get meaningful reps adding event listeners to DOM elements.
- stop event propagation where appropriate
- practice self-directed learning
- Add a
clickevent for the<button>element. Each time the button is clicked, it should append a<p>tag with sassy text content to the<body>element. - Add a
mouseleaveevent for the green div. Whenever a the mouse leaves the div, log "You're always pulling away! You're terrified of intimacy!" to the console. - Add a click event listener to the
<body>element. When the element is clicked, give it the class of "pleasant".
- Note: You'll notice that clicking the container will change the background color, but it should only change if the area OUTSIDE the container div is clicked, so make sure you stop the propagation of the click event on the container div.
- Add a keypress event (google it) that console logs the letter that's typed and appends an
<h2>to the DOM. Make the<h2>read "The User has typed".
- Create an
<h2>tag that reads "Mouse Coordinates" and append it to the body. - Create a
<p>tag that reads "X: " - Create a
<p>tag that reads "Y: " - Add a mousemove event listener to the body element. It should update the p tags with the x and y coordinates of the mouse with every mouse movement.