From b58560f472936a5476a76440d033e3e093f0303b Mon Sep 17 00:00:00 2001
From: Chris Houdlette <choudlette@gmail.com>
Date: Tue, 1 Nov 2016 20:08:14 -0600
Subject: [PATCH 1/2] finished exercise in both JS and JQUERY + 1st challenge

---
 index.html |  1 +
 script.js  | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 65 insertions(+)

diff --git a/index.html b/index.html
index 3298ffb..9c5c1cc 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,7 @@ <h1 id="goButton" class="button">Go</h1>
       <div id="slowLight" class="bulb"></div>
       <div id="goLight" class="bulb"></div>
     </div>
+    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/script.js b/script.js
index 2858b7c..f3b9616 100644
--- a/script.js
+++ b/script.js
@@ -8,3 +8,67 @@
   When I click on the 'go' button
     the bottom light should turn green.
 */
+
+//answer with javascript
+
+var stopButton = document.getElementById('stopButton');
+var stopLight = document.getElementById('stopLight');
+var slowButton = document.getElementById('slowButton');
+var slowLight = document.getElementById('slowLight');
+var goButton = document.getElementById("goButton")
+var goLight = document.getElementById("goLight")
+
+function turnRed() {
+  stopLight.style.background = "red";
+  slowLight.style.background = "black";
+  goLight.style.background = "black";
+}
+
+function turnYellow() {
+  stopLight.style.background = "black";
+  slowLight.style.background = "yellow";
+  goLight.style.background = "black";
+}
+
+function turnGreen() {
+  stopLight.style.background = "black";
+  slowLight.style.background = "black";
+  goLight.style.background = "green";
+}
+
+function showContent(event) {
+  console.log("Entered " + this.textContent + "Button");
+}
+
+function leaveButton(event) {
+  console.log("Leaving" + this.textContent + "Button")
+}
+
+stopButton.addEventListener("click", turnRed);
+slowButton.addEventListener("click", turnYellow);
+goButton.addEventListener("click", turnGreen);
+stopButton.addEventListener("mouseover", showContent);
+slowButton.addEventListener("mouseover", showContent);
+goButton.addEventListener("mouseover", showContent);
+stopButton.addEventListener("mouseout", leaveButton);
+slowButton.addEventListener("mouseout", leaveButton);
+goButton.addEventListener("mouseout", leaveButton);
+// answer in jquery
+
+$('#stopButton').click(function(){
+  $('#stopLight').css("background-color", "red");
+  $('#slowLight').css("background-color", "black");
+  $('#goLight').css("background-color", "black");
+});
+
+$('#slowButton').click(function(){
+  $('#slowLight').css("background-color", "yellow");
+  $('#stopLight').css("background-color", "black");
+  $('#goLight').css("background-color", "black");
+});
+
+$('#goButton').click(function(){
+  $('#goLight').css("background-color", "green");
+  $('#slowLight').css("background-color", "black");
+  $('#stopLight').css("background-color", "black");
+});

From 3d90c423686e59006ecf03b33c677fc07d907eea Mon Sep 17 00:00:00 2001
From: Chris Houdlette <choudlette@gmail.com>
Date: Tue, 1 Nov 2016 20:19:27 -0600
Subject: [PATCH 2/2] added timing mechanism

---
 script.js | 27 +++++++--------------------
 1 file changed, 7 insertions(+), 20 deletions(-)

diff --git a/script.js b/script.js
index f3b9616..1b03da7 100644
--- a/script.js
+++ b/script.js
@@ -18,10 +18,16 @@ var slowLight = document.getElementById('slowLight');
 var goButton = document.getElementById("goButton")
 var goLight = document.getElementById("goLight")
 
-function turnRed() {
+function redBulb() {
   stopLight.style.background = "red";
   slowLight.style.background = "black";
+}
+
+function turnRed() {
+  stopLight.style.background = "black";
+  slowLight.style.background = "yellow";
   goLight.style.background = "black";
+  setTimeout (redBulb, 5000);
 }
 
 function turnYellow() {
@@ -53,22 +59,3 @@ goButton.addEventListener("mouseover", showContent);
 stopButton.addEventListener("mouseout", leaveButton);
 slowButton.addEventListener("mouseout", leaveButton);
 goButton.addEventListener("mouseout", leaveButton);
-// answer in jquery
-
-$('#stopButton').click(function(){
-  $('#stopLight').css("background-color", "red");
-  $('#slowLight').css("background-color", "black");
-  $('#goLight').css("background-color", "black");
-});
-
-$('#slowButton').click(function(){
-  $('#slowLight').css("background-color", "yellow");
-  $('#stopLight').css("background-color", "black");
-  $('#goLight').css("background-color", "black");
-});
-
-$('#goButton').click(function(){
-  $('#goLight').css("background-color", "green");
-  $('#slowLight').css("background-color", "black");
-  $('#stopLight').css("background-color", "black");
-});