diff --git a/app.js b/app.js index 8d24a7e..02b3df5 100644 --- a/app.js +++ b/app.js @@ -1,35 +1,44 @@ -var changeGreetingAndAddGif = function(){ +window.onload = function() { + + // change greeting var greeting_div = document.getElementById("greeting"); 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(){ - var list_items = document.querySelectorAll("div#essentials > ul > li"); + // 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); } -}; -var selectItem = function(event){ - var list_items = document.querySelectorAll("div#essentials > ul > li"); - for (var i = list_items.length - 1; i >= 0; i--) { - list_items[i].classList.remove("selected"); - } - this.classList.add("selected"); - document.querySelectorAll("img")[1].setAttribute("src","./images/" + this.innerHTML + ".jpeg"); + // 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); }; -var resetButtonHandler = function() { - var list_items = document.querySelectorAll("li"); - for (var i = list_items.length - 1; i >= 0; i--) { - list_items[i].className = ""; - } +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'; @@ -45,6 +54,8 @@ var noDigits = function(e) { } }; +// BONUS + var idx = 0; var konamiCheck = function(e) { @@ -53,21 +64,9 @@ var konamiCheck = function(e) { idx++; if (idx === konamiCodeKeyCodes.length) { alert("YOU ARE AN EVENT HANDLER GURUUUUUUUUU!"); + idx = 0; } } else { 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; \ No newline at end of file +}; \ No newline at end of file