|
|
|
@ -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; |