add solution

10 years ago · 953303acef
parent ca07b4c73d
commit 953303acef
3 changed files with 41 additions and 7 deletions
--- a/app.js
+++ 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;
--- a/index.html
+++ b/index.html
@ -2,13 +2,9 @@
 <html>
 <head>
  <meta charset="utf-8">
-  <title>The DOM playground</title>
-  <style>
-  .selected{ font-weight: bold;}
-  </style>
-  <script>
-  console.log("JavaScript is alive");
-  </script>
+  <title>Le DOM playground</title>
+  <link rel="stylesheet" href="style.css">
+  <script src="app.js" ></script>
 </head>
 <body>
  <div id="greeting">
--- a/style.css
+++ b/style.css
@ -0,0 +1,3 @@
+.selected {
+  text-decoration: line-through;
+}