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.
 
 
 
Matt Lane 819788f6ff restructure solution 9 years ago
images Initial commit 10 years ago
README.md all except bonus 9 years ago
app.css update DOM exercises 9 years ago
app.js restructure solution 9 years ago
index.html update DOM exercises 9 years ago

README.md

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> and change the image to panic.jpeg.

  6. When the 1, 2, 3, 4, 5, 6, 7, 8, 9, or 0 key is pressed, the page alerts the message "I HATE NUMBERZZZ!"

BONUS: If someone types the Konami Code, the page alerts "YOU ARE AN EVENT HANDLER GURUUUUUUUUU!"