diff --git a/index.html b/index.html index 3298ffb..2d5bc4e 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,8 @@ Stoplight Exercise - + +
@@ -11,11 +12,11 @@

Slow

Go

+
- diff --git a/script.js b/script.js index b595fce..e9ded5d 100644 --- 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}`); + }); +})();