Improve the solution

index.js

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