restructure solution

solution
Matt Lane 9 years ago
parent 611180fcf8
commit 819788f6ff
  1. 69
      app.js

@ -1,35 +1,44 @@
var changeGreetingAndAddGif = function(){ window.onload = function() {
// change greeting
var greeting_div = document.getElementById("greeting"); var greeting_div = document.getElementById("greeting");
greeting_div.innerHTML = "Hello, World!"; greeting_div.innerHTML = "Hello, World!";
var img = document.createElement('img');
img.src = "http://49.media.tumblr.com/tumblr_m6qt1rjPSz1rxjzkho1_500.gif";
greeting_div.appendChild(img);
};
var styleListElements = function(){ // set background on lis and add event listener
var list_items = document.querySelectorAll("div#essentials > ul > li"); var list_items = document.querySelectorAll("li");
for (var i = list_items.length - 1; i >= 0; i--) { for (var i = list_items.length - 1; i >= 0; i--) {
list_items[i].style.backgroundColor = "yellow"; list_items[i].style.backgroundColor = "yellow";
list_items[i].addEventListener("click", selectItem); list_items[i].addEventListener("click", selectItem);
} }
};
var selectItem = function(event){ // create and add image
var list_items = document.querySelectorAll("div#essentials > ul > li"); var img = document.createElement('img');
for (var i = list_items.length - 1; i >= 0; i--) { img.src = "http://49.media.tumblr.com/tumblr_m6qt1rjPSz1rxjzkho1_500.gif";
list_items[i].classList.remove("selected"); greeting_div.appendChild(img);
}
this.classList.add("selected"); // add more event listeners
document.querySelectorAll("img")[1].setAttribute("src","./images/" + this.innerHTML + ".jpeg"); 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);
}; };
var resetButtonHandler = function() { function selectItem() {
var list_items = document.querySelectorAll("li"); var curSelected = document.querySelector(".selected");
for (var i = list_items.length - 1; i >= 0; i--) { if (curSelected) { curSelected.className = ""; }
list_items[i].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"); document.querySelectorAll("img")[1].setAttribute("src","./images/panic.jpeg");
}; }
var doubleWidth = function() { var doubleWidth = function() {
this.style.width = '400px'; this.style.width = '400px';
@ -45,6 +54,8 @@ var noDigits = function(e) {
} }
}; };
// BONUS
var idx = 0; var idx = 0;
var konamiCheck = function(e) { var konamiCheck = function(e) {
@ -53,21 +64,9 @@ var konamiCheck = function(e) {
idx++; idx++;
if (idx === konamiCodeKeyCodes.length) { if (idx === konamiCodeKeyCodes.length) {
alert("YOU ARE AN EVENT HANDLER GURUUUUUUUUU!"); alert("YOU ARE AN EVENT HANDLER GURUUUUUUUUU!");
idx = 0;
} }
} else { } else {
idx = 0; idx = 0;
} }
}; };
var initialize = function(){
changeGreetingAndAddGif();
styleListElements();
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);
document.querySelector("body").addEventListener("keyup", konamiCheck);
};
window.onload=initialize;
Loading…
Cancel
Save