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.
39 lines
1.4 KiB
39 lines
1.4 KiB
# DOM_Intro_Exercise
|
|
|
|
Practice manipulating the DOM!
|
|
|
|
## Part One:
|
|
|
|
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.
|
|
|
|
4. Create and add a ul element to the end of the body with a class of "todo-items"
|
|
|
|
5. Go through the array `['make coffee','eat donut','change diapers','drive to work']` and create an li element for each item e.g. `<li>make coffee</li>`
|
|
|
|
6. Add each newly created li element to your ul of class "todo-items"
|
|
|
|
## Part Two:
|
|
|
|
Afterwards:
|
|
|
|
4. Add the class of `selected` to an `<li>` when it is clicked. Remove it from any other `li`s as well.
|
|
|
|
5. Change the image to be the most recently clicked food item.
|
|
|
|
6. When the gray div is moused over, it's removed from the DOM.
|
|
|
|
7. When the orange div is moused over, its width doubles. When the mouse moves out of the div, it returns to its original size.
|
|
|
|
8. When the reset button is clicked - remove the `selected` class from each `<li>` and change the image to `panic.jpeg`.
|
|
|
|
9. 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](https://en.wikipedia.org/wiki/Konami_Code), the page alerts "YOU ARE AN EVENT HANDLER GURUUUUUUUUU!"
|
|
|