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..4a0ba59 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,55 @@
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 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');
+ }
+});
+
+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 {
+ stopLight.classList.remove('red');
+ slowLight.classList.add('yellow');
+ goLight.classList.remove('green');
+ }
+});
+
+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 {
+ stopLight.classList.remove('red');
+ slowLight.classList.remove('yellow');
+ 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;
+}