1.1 KiB
DOM_Intro_Exercise
Practice manipulating the DOM!
In a separate JS file:
When the page loads:
-
Change the greeting from "Hello, There!" to "Hello, World!".
-
Set the background color of each
<li>
toyellow
. -
Create an image tag, set its
src
attribute tohttp://49.media.tumblr.com/tumblr_m6qt1rjPSz1rxjzkho1_500.gif
, and append the to the#greeting
div.
Afterwards:
-
Add the class of
selected
to an<li>
when it is clicked. Remove it from any otherli
s as well. -
Change the image to be the most recently clicked food item.
-
When the gray div is moused over, it's removed from the DOM.
-
When the orange div is moused over, its width doubles. When the mouse moves out of the div, it returns to its original size.
-
When the reset button is clicked - remove the
selected
class from each<li>
, change the image topanic.jpeg
, and add the gray div back to the DOM if it has been removed. -
When the a, e, i, o, or u key is pressed, the page alerts the message "I HATE VOWELS!"
BONUS: If someone types the Konami Code, the page alerts "YOU ARE AN EVENT HANDLER GURUUUUUUUUU!"