Implement solution.

This reverts commit 8d168d8a35.

index.js

@@ -1,80 +1,23 @@
-(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');
-
-  // part 1
-  stopButton.addEventListener('click', () => {
-    stopLight.classList.toggle('stop');
-
-    // or...
-    // if (stopLight.classList.contains('stop')) {
-    //   stopLight.classList.remove('stop');
-    // }
-    // else {
-    //   stopLight.classList.add('stop');
-    // }
-  });
-
-  slowButton.addEventListener('click', () => {
-    slowLight.classList.toggle('slow');
-  });
-
-  goButton.addEventListener('click', () => {
-    goLight.classList.toggle('go');
-  });
-
-  // part 2
-  const handleMouseEnter = (event) => {
-    console.log(`Entered ${event.target.textContent} button`);
-  };
-
-  const handleMouseLeave = (event) => {
-    console.log(`Left ${event.target.textContent} button`);
-  };
-
-  stopButton.addEventListener('mouseenter', handleMouseEnter);
-  slowButton.addEventListener('mouseenter', handleMouseEnter);
-  goButton.addEventListener('mouseenter', handleMouseEnter);
-
-  stopButton.addEventListener('mouseleave', handleMouseLeave);
-  slowButton.addEventListener('mouseleave', handleMouseLeave);
-  goButton.addEventListener('mouseleave', handleMouseLeave);
-
-  // bonus
-  const controls = document.querySelector('#controls');
-
-  controls.addEventListener('click', (event) => {
-    if (event.target === controls) {
-      return;
-    }
-
-    let status;
-
-    if (event.target === stopButton) {
-      status = stopLight.classList.contains('stop') ? 'on' : 'off';
-
-      // or...
-      // if (stopLight.classList.contains('stop')) {
-      //   status = 'on';
-      // }
-      // else {
-      //   status = 'off';
-      // }
-    }
-    else if (event.target === slowButton) {
-      status = slowLight.classList.contains('slow') ? 'on' : 'off';
-    }
-    else {
-      status = goLight.classList.contains('go') ? 'on' : 'off';
-    }
-
-    console.log(`${event.target.textContent} bulb ${status}`);
-  });
-})();
+document.addEventListener("DOMContentLoaded",()=>{
+	document.getElementById("controls").addEventListener("click",(clicked)=>{
+		var lightPrefix = clicked.target.id.replace("Button","");
+		var targetLight = document.getElementById(lightPrefix+"Light");
+		if (!targetLight.classList.contains(lightPrefix)) {
+			targetLight.classList.add(lightPrefix);
+			console.log(lightPrefix+" bulb on.")
+		} else {
+			targetLight.classList.remove(lightPrefix);
+			console.log(lightPrefix+" bulb off.")
+		}
+	})
+	
+	var buttons = document.getElementsByClassName("button");
+	for (var i=0;i<buttons.length;i++) {
+		buttons[i].addEventListener("mouseenter",(e)=>{
+			console.log("Entered "+e.target.innerHTML+" button.")
+		})
+		buttons[i].addEventListener("mouseleave",(e)=>{
+			console.log("Left "+e.target.innerHTML+" button.")
+		})
+	}
+})