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
-  each `<li>` and change the image to `panic.jpeg`.
+BONUS: If someone types the [Konami Code](https://en.wikipedia.org/wiki/Konami_Code), the page alerts "YOU ARE AN EVENT HANDLER GURUUUUUUUUU!"
--- 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>
-  .selected{ font-weight: bold;}
-  </style>
-  <script>
-  console.log("JavaScript is alive");
-  </script>
+  <link rel="stylesheet" href="app.css">
+  <script src="app.js"></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>