diff --git a/app.js b/app.js index f2b6cae..6e7bb2a 100644 --- a/app.js +++ b/app.js @@ -1,7 +1,35 @@ -console.log("Javascript is alive!"); +var styleListElements = function(){ + var list_items = document.querySelectorAll("div#essentials > ul > li"); + for (var i = list_items.length - 1; i >= 0; i--) { + // for (initializer, condition, counter) + list_items[i].style.backgroundColor = "yellow"; + list_items[i].addEventListener("click", selectItem); + } +}; -window.onload = function() { - document.querySelector('body').addEventListener('keypress', function(e) { - console.log(e) - }) -}; \ No newline at end of file +var selectItem = function(event){ + // console.log(this.innerHTML); + this.classList.add("selected"); + document.querySelector("img").setAttribute("src","./images/" + this.innerHTML + ".jpeg"); +}; + +var changeGreeting = function(){ + var greeting_div = document.getElementById("greeting"); + greeting_div.innerHTML = "Hello Planet earth!"; +}; + +var resetButtonHandler = function() { + var list_items = document.querySelectorAll("li"); + for (var i = list_items.length - 1; i >= 0; i--) { + list_items[i].className = ""; + } + document.querySelector("img").setAttribute("src","./images/panic.jpeg"); +}; + +var initialize = function(){ + changeGreeting(); + styleListElements(); + document.querySelector("#reset").addEventListener("click",resetButtonHandler); +}; + +window.onload=initialize; \ No newline at end of file