completed assignment

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>

script.js

@@ -8,3 +8,54 @@
   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 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() {
+  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);