update DOM exercises

9 years ago · a2f187dfad
parent 7c0413b7a0
commit a2f187dfad
4 changed files with 49 additions and 12 deletions
--- a/README.md
+++ b/README.md
@ -6,15 +6,25 @@ In a separate JS file:
 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: 
-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.
 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>`, change the image to `panic.jpeg`, and add the gray div back to the DOM if it has been removed.
-4. change the image to be the most recently clicked food item.
+9. When the a, e, i, o, or u key is pressed, the page alerts the message "I HATE VOWELS!"
-5. when the reset button is clicked - remove the `selected` class from
+BONUS: If someone types the [Konami Code](https://en.wikipedia.org/wiki/Konami_Code), the page alerts "YOU ARE AN EVENT HANDLER GURUUUUUUUUU!"
  each `<li>` and change the image to `panic.jpeg`.
--- a/app.css
+++ b/app.css
@ -0,0 +1,16 @@
 .selected { 
  font-weight: bold;
 }
 #ghosting, #resize {
  width: 200px;
  height: 200px;
 }
 #ghosting {
  background-color: #ddd;
 }  
 #resize {
  background-color: orange;
 }
--- a/app.js
+++ b/app.js
@ -0,0 +1,7 @@
 console.log("Javascript is alive!");
 window.onload = function() {
  document.querySelector('body').addEventListener('keypress', function(e)  {
    console.log(e)
  })
 };
--- a/index.html
+++ b/index.html
@ -3,12 +3,8 @@
 <head>
  <meta charset="utf-8">
  <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>
 <body>
  <div id="greeting">
@ -33,6 +29,14 @@
    <img src="./images/honey.jpeg" height="60" width="60" alt="beer">
  </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>
 </body>
 </html>