Compare commits

...

8 Commits

Author SHA1 Message Date
Matt Lane b522853b29 resolve merge conflict 9 years ago
Matt Lane 819788f6ff restructure solution 9 years ago
Matt Lane eb16ee0beb Update app.js 9 years ago
Matt Lane 611180fcf8 add bonus solution 9 years ago
Matt Lane a52d23074a all except bonus 9 years ago
Matt Lane ed0de11490 fix merge conflicts 9 years ago
Matt Lane 56ab9a6297 remove .DS_Store 9 years ago
Colt 953303acef add solution 10 years ago
  1. 5
      README.md
  2. 76
      app.js

@ -22,9 +22,8 @@ Afterwards:
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. 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 8. When the reset button is clicked - remove the `selected` class from each `<li>` and change the image to `panic.jpeg`.
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!" 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!" BONUS: If someone types the [Konami Code](https://en.wikipedia.org/wiki/Konami_Code), the page alerts "YOU ARE AN EVENT HANDLER GURUUUUUUUUU!"

@ -1,7 +1,73 @@
console.log("Javascript is alive!");
window.onload = function() { window.onload = function() {
document.querySelector('body').addEventListener('keypress', function(e) {
console.log(e) // change greeting
}) var greeting_div = document.getElementById("greeting");
greeting_div.innerHTML = "Hello, World!";
// set background on lis and add event listener
var list_items = document.querySelectorAll("li");
for (var i = list_items.length - 1; i >= 0; i--) {
list_items[i].style.backgroundColor = "yellow";
list_items[i].addEventListener("click", selectItem);
}
// create and add image
var img = document.createElement('img');
img.src = "http://49.media.tumblr.com/tumblr_m6qt1rjPSz1rxjzkho1_500.gif";
greeting_div.appendChild(img);
// add more event listeners
document.querySelector("#reset").addEventListener("click",resetButtonHandler);
document.querySelector("#ghosting").addEventListener("mouseover", function() { this.remove(); });
document.querySelector("#resize").addEventListener("mouseenter", doubleWidth);
document.querySelector("#resize").addEventListener("mouseleave", resetWidth);
document.querySelector("body").addEventListener("keyup", noDigits);
// BONUS
document.querySelector("body").addEventListener("keyup", konamiCheck);
};
function selectItem() {
var curSelected = document.querySelector(".selected");
if (curSelected) { curSelected.className = ""; }
this.className = "selected";
document.querySelectorAll("img")[1].src = "./images/" + this.innerHTML + ".jpeg";
}
function resetButtonHandler() {
var curSelected = document.querySelector(".selected");
if (curSelected) { curSelected.className = ""; }
document.querySelectorAll("img")[1].setAttribute("src","./images/panic.jpeg");
}
var doubleWidth = function() {
this.style.width = '400px';
};
var resetWidth = function() {
this.style.width = '200px';
};
var noDigits = function(e) {
if (e.keyCode >= 48 && e.keyCode <= 57) {
alert("I HATE NUMBERZZZ!");
}
};
// BONUS
var idx = 0;
var konamiCheck = function(e) {
var konamiCodeKeyCodes = [38,38,40,40,37,39,37,39,66,65];
if (e.keyCode === konamiCodeKeyCodes[idx]) {
idx++;
if (idx === konamiCodeKeyCodes.length) {
alert("YOU ARE AN EVENT HANDLER GURUUUUUUUUU!");
idx = 0;
}
} else {
idx = 0;
}
}; };
Loading…
Cancel
Save