From d5f4a7da1b7f54e28c736363daffceb92f3e79b9 Mon Sep 17 00:00:00 2001 From: Tyler Briskie Date: Tue, 1 Nov 2016 17:36:07 -0600 Subject: [PATCH 1/2] added toggle switch for all three lights --- index.html | 2 +- script.js | 39 ++++++++++++++++++++++++++++++++++++++- styles.css | 12 +++++++++++- 3 files changed, 50 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 3298ffb..dc8d43e 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - Stoplight Exercise + Slave To The Traffic Light diff --git a/script.js b/script.js index 2858b7c..9dbc89a 100644 --- a/script.js +++ b/script.js @@ -1,6 +1,6 @@ /* Write JS to make this stoplight work. - +var When I click on the 'stop' button, the top light should turn red. When I click on the 'slow' button @@ -8,3 +8,40 @@ When I click on the 'go' button the bottom light should turn green. */ + +var stopButton = document.getElementById('stopButton'); +stopButton.addEventListener('click', function(){ + if (stopLight.classList.contains('red')){ + stopLight.classList.remove('red'); + } else { + stopLight.classList.add('red'); + } +}); + +stopButton.addEventListener('mouseover', function(){ + console.log("Entered " + stopButton.innerHTML + " button."); +}); + +var slowButton = document.getElementById('slowButton'); +slowButton.addEventListener('click', function(){ + if (slowLight.classList.contains('yellow')){ + slowLight.classList.remove('yellow'); + } else { + slowLight.classList.add('yellow'); + } +}); +slowButton.addEventListener('mouseover', function(){ + console.log("Entered " + slowButton.innerHTML + " button."); +}); + +var goButton = document.getElementById('goButton'); +goButton.addEventListener('click', function(){ + if (goLight.classList.contains('green')){ + goLight.classList.remove('green'); + } else { + goLight.classList.add('green'); + } +}); +goButton.addEventListener('mouseover', function(){ + console.log("Entered " + goButton.innerHTML + " button."); +}); diff --git a/styles.css b/styles.css index 804d727..cf913bb 100644 --- a/styles.css +++ b/styles.css @@ -30,4 +30,14 @@ border-radius: 50%; margin: 25px auto; transition: background 500ms; -} \ No newline at end of file +} +.red { + background-color:red; +} + +.yellow { + background-color:yellow; +} +.green { + background-color:green; +} From 10ba93993277249170930c083e57903ac136136f Mon Sep 17 00:00:00 2001 From: Tyler Briskie Date: Fri, 4 Nov 2016 10:42:37 -0600 Subject: [PATCH 2/2] finished stoplight exercise, and bonus --- script.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/script.js b/script.js index 9dbc89a..4a0ba59 100644 --- a/script.js +++ b/script.js @@ -13,8 +13,17 @@ var stopButton = document.getElementById('stopButton'); stopButton.addEventListener('click', function(){ if (stopLight.classList.contains('red')){ stopLight.classList.remove('red'); - } else { + } else if (goLight.classList.contains('green')){ + goLight.classList.remove('green'); + slowLight.classList.add('yellow'); + setTimeout(function(){ + slowLight.classList.remove('yellow'); + stopLight.classList.add('red'); + }, 5000); + }else { stopLight.classList.add('red'); + slowLight.classList.remove('yellow'); + goLight.classList.remove('green'); } }); @@ -27,9 +36,12 @@ slowButton.addEventListener('click', function(){ if (slowLight.classList.contains('yellow')){ slowLight.classList.remove('yellow'); } else { + stopLight.classList.remove('red'); slowLight.classList.add('yellow'); + goLight.classList.remove('green'); } }); + slowButton.addEventListener('mouseover', function(){ console.log("Entered " + slowButton.innerHTML + " button."); }); @@ -39,9 +51,12 @@ goButton.addEventListener('click', function(){ if (goLight.classList.contains('green')){ goLight.classList.remove('green'); } else { + stopLight.classList.remove('red'); + slowLight.classList.remove('yellow'); goLight.classList.add('green'); } }); + goButton.addEventListener('mouseover', function(){ console.log("Entered " + goButton.innerHTML + " button."); });