uthrakrishnan / DOM_Intro_Exercise

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

About


Languages

Language:JavaScript 73.3%Language:HTML 21.6%Language:CSS 5.0%