Practice manipulating the DOM!
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
DOM_Intro_Exercise/README.md

1.1 KiB

DOM_Intro_Exercise

Practice manipulating the DOM!

In a separate JS file:

When the page loads:

  1. Change the greeting from "Hello, There!" to "Hello, World!".

  2. Set the background color of each <li> to yellow.

  3. Create an image tag, set its src attribute to http://49.media.tumblr.com/tumblr_m6qt1rjPSz1rxjzkho1_500.gif, and append the to the #greeting div.

Afterwards:

  1. Add the class of selected to an <li> when it is clicked. Remove it from any other lis as well.

  2. Change the image to be the most recently clicked food item.

  3. When the gray div is moused over, it's removed from the DOM.

  4. When the orange div is moused over, its width doubles. When the mouse moves out of the div, it returns to its original size.

  5. When the reset button is clicked - remove the selected class from each <li>, change the image to panic.jpeg, and add the gray div back to the DOM if it has been removed.

  6. 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!"