Improve solution

8 years ago · eec0a7ed3d
parent 549e267eea
commit eec0a7ed3d
2 changed files with 82 additions and 67 deletions
--- a/index.html
+++ b/index.html
@ -3,7 +3,8 @@
  <head>
    <meta charset="utf-8">
    <title>Stoplight Exercise</title>
-    <link rel="stylesheet" href="styles.css" media="screen" title="no title" charset="utf-8">
+    <script defer src="script.js"></script>
+    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="controls">
@ -11,11 +12,11 @@
      <h1 id="slowButton" class="button">Slow</h1>
      <h1 id="goButton" class="button">Go</h1>
    </div>
+
    <div id="traffic-light">
      <div id="stopLight" class="bulb"></div>
      <div id="slowLight" class="bulb"></div>
      <div id="goLight" class="bulb"></div>
    </div>
-    <script src="script.js"></script>
  </body>
 </html>
--- a/script.js
+++ b/script.js
@ -9,68 +9,82 @@
    the bottom light should turn green.
 */

-var stopButton = document.querySelector("#stopButton");
-var stopLight = document.getElementById('stopLight');
-
-stopButton.addEventListener("click", function(){
-  var color;
-  stopLight.style.backgroundColor === "red" ? color = "" : color = "red";
-  stopLight.style.backgroundColor = color;
-});
-
-stopButton.addEventListener("mouseenter", function(){
-  console.log(`Entered ${this.textContent} button`);
-});
-
-stopButton.addEventListener("mouseleave", function(){
-  console.log(`Left ${this.textContent} button`);
-});
-
-var slowButton = document.querySelector("#slowButton");
-var slowLight = document.getElementById('slowLight');
-
-slowButton.addEventListener("click", function(){
-  var color;
-  slowLight.style.backgroundColor === "orange" ? color = "" : color = "orange";
-  slowLight.style.backgroundColor = color;
-});
-
-slowButton.addEventListener("mouseenter", function(){
-  console.log(`Entered ${this.textContent} button`);
-});
-
-slowButton.addEventListener("mouseleave", function(){
-  console.log(`Left ${this.textContent} button`);
-});
-
-var goButton = document.querySelector("#goButton");
-var goLight = document.getElementById('goLight');
-
-goButton.addEventListener("click", function(){
-  var color;
-  goLight.style.backgroundColor === "green" ? color = "" : color = "green";
-  goLight.style.backgroundColor = color;
-});
-
-goButton.addEventListener("mouseenter", function(){
-  console.log(`Entered ${this.textContent} button`);
-});
-
-goButton.addEventListener("mouseleave", function(){
-  console.log(`Left ${this.textContent} button`);
-});
-
-var controls = document.querySelector('#controls');
-
-controls.addEventListener('click', function(event) {
-  var text = event.target.textContent;
-  var status;
-  if (text === 'Stop') {
-    status = stopLight.style.backgroundColor === 'red' ? 'on' : 'off';
-  } else if (text === 'Slow') {
-    status = slowLight.style.backgroundColor === 'orange' ? 'on' : 'off';
-  } else {
-    status = goLight.style.backgroundColor === 'green' ? 'on' : 'off';
-  }
-  console.log(`${text} bulb ${status}`);
-});
+(function() {
+  'use strict';
+
+  const stopButton = document.querySelector('#stopButton');
+  const slowButton = document.querySelector('#slowButton');
+  const goButton = document.querySelector('#goButton');
+
+  const stopLight = document.querySelector('#stopLight');
+  const slowLight = document.querySelector('#slowLight');
+  const goLight = document.querySelector('#goLight');
+
+  const controls = document.querySelector('#controls');
+
+  // stopButton
+  stopButton.addEventListener('click', () => {
+    const color = stopLight.style.backgroundColor === 'red' ? '' : 'red';
+
+    stopLight.style.backgroundColor = color;
+  });
+
+  stopButton.addEventListener('mouseenter', (event) => {
+    console.log(`Entered ${event.target.textContent} button`);
+  });
+
+  stopButton.addEventListener('mouseleave', (event) => {
+    console.log(`Left ${event.target.textContent} button`);
+  });
+
+  // slowButton
+  slowButton.addEventListener('click', () => {
+    const color = slowLight.style.backgroundColor === 'orange' ? '' : 'orange';
+
+    slowLight.style.backgroundColor = color;
+  });
+
+  slowButton.addEventListener('mouseenter', (event) => {
+    console.log(`Entered ${event.target.textContent} button`);
+  });
+
+  slowButton.addEventListener('mouseleave', (event) => {
+    console.log(`Left ${event.target.textContent} button`);
+  });
+
+  // goButton
+  goButton.addEventListener('click', () => {
+    const color = goLight.style.backgroundColor === 'green' ? '' : 'green';
+
+    goLight.style.backgroundColor = color;
+  });
+
+  goButton.addEventListener('mouseenter', (event) => {
+    console.log(`Entered ${event.target.textContent} button`);
+  });
+
+  goButton.addEventListener('mouseleave', (event) => {
+    console.log(`Left ${event.target.textContent} button`);
+  });
+
+  // controls
+  controls.addEventListener('click', (event) => {
+    if (event.target === controls) {
+      return;
+    }
+
+    let status;
+
+    if (event.target === stopButton) {
+      status = stopLight.style.backgroundColor === 'red' ? 'on' : 'off';
+    }
+    else if (event.target === slowButton) {
+      status = slowLight.style.backgroundColor === 'orange' ? 'on' : 'off';
+    }
+    else {
+      status = goLight.style.backgroundColor === 'green' ? 'on' : 'off';
+    }
+
+    console.log(`${event.target.textContent} bulb ${status}`);
+  });
+})();