sigonasr2/DOM_Intro_Exercise
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update DOM exercises

Browse Source
This commit is contained in:
Matt Lane 2016-02-24 14:28:32 -08:00
parent 7c0413b7a0
commit a2f187dfad
4 changed files with 49 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
README.md
View File

@ -6,15 +6,25 @@ In a separate JS file:
When the page loads: When the page loads:
- change the greeting from "Hello, There!" to "Hello, World!". 1. Change the greeting from "Hello, There!" to "Hello, World!".
- set the background color of each `<li>` to `yellow`. 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: Afterwards:
3. add the class of `selected` to an `<li>` when it is clicked. 4. Add the class of `selected` to an `<li>` when it is clicked. Remove it from any other `li`s as well.
4. change the image to be the most recently clicked food item. 5. Change the image to be the most recently clicked food item.
5. when the reset button is clicked - remove the `selected` class from 6. When the gray div is moused over, it's removed from the DOM.
each `<li>` and change the image to `panic.jpeg`.
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>`, change the image to `panic.jpeg`, and add the gray div back to the DOM if it has been removed.
9. 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](https://en.wikipedia.org/wiki/Konami_Code), the page alerts "YOU ARE AN EVENT HANDLER GURUUUUUUUUU!"

16
app.css Normal file
View File

@ -0,0 +1,16 @@
.selected {
font-weight: bold;
}
#ghosting, #resize {
width: 200px;
height: 200px;
}
#ghosting {
background-color: #ddd;
}
#resize {
background-color: orange;
}

7
app.js Normal file
View File

@ -0,0 +1,7 @@
console.log("Javascript is alive!");
window.onload = function() {
document.querySelector('body').addEventListener('keypress', function(e) {
console.log(e)
})
};

16
index.html
View File

@ -3,12 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>The DOM playground</title> <title>The DOM playground</title>
<style> <link rel="stylesheet" href="app.css">
.selected{ font-weight: bold;} <script src="app.js"></script>
</style>
<script>
console.log("JavaScript is alive");
</script>
</head> </head>
<body> <body>
<div id="greeting"> <div id="greeting">
@ -33,6 +29,14 @@
<img src="./images/honey.jpeg" height="60" width="60" alt="beer"> <img src="./images/honey.jpeg" height="60" width="60" alt="beer">
</div> </div>
<div id="ghosting">
Touch me and I'll disappear!
</div>
<div id="resize">
Touch me and I'll turn twice as wide!
</div>
<input type="submit" value="Reset" id="reset"></input> <input type="submit" value="Reset" id="reset"></input>
</body> </body>
</html> </html>