From 953303acefb2cc1efe0c164ec41d56d1db159953 Mon Sep 17 00:00:00 2001 From: Colt Date: Tue, 13 Jan 2015 22:40:06 -0800 Subject: [PATCH] add solution --- app.js | 35 +++++++++++++++++++++++++++++++++++ index.html | 10 +++------- style.css | 3 +++ 3 files changed, 41 insertions(+), 7 deletions(-) create mode 100644 app.js create mode 100644 style.css diff --git a/app.js b/app.js new file mode 100644 index 0000000..0d50e42 --- /dev/null +++ b/app.js @@ -0,0 +1,35 @@ +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); + } +}; + +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; diff --git a/index.html b/index.html index e6be37d..ddb0c1d 100644 --- a/index.html +++ b/index.html @@ -2,13 +2,9 @@ - The DOM playground - - + Le DOM playground + +
diff --git a/style.css b/style.css new file mode 100644 index 0000000..4e22d26 --- /dev/null +++ b/style.css @@ -0,0 +1,3 @@ +.selected { + text-decoration: line-through; +}