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>
+  <title>Le DOM playground</title>
-  <style>
+  <link rel="stylesheet" href="style.css">
-  .selected{ font-weight: bold;}
+  <script src="app.js" ></script>
  </style>
  <script>
  console.log("JavaScript is alive");
  </script>
 </head>
 <body>
  <div id="greeting">
--- a/style.css
+++ b/style.css
@ -0,0 +1,3 @@
 .selected {
  text-decoration: line-through;
 }