🚦Stop Light

Watch the video to the right.

Because we've done so much practice with DOM manipulation and event handlers I'm not actually going to give you any source code to start with for this assignment. You are on your own.

Deep breathes. Let me give you some pointers.

1. The stop light is made up of 4 divs. No images required.
2. I made the lights as realistic as possible and would encourage you to do the same. But don't get hung up on the CSS. The JS is where you really want to spend the time.
3. Just as with the examples in class, you'll be adding event listeners to the buttons. There will be four corresponding event handler functions. What you have to figure out is how to "control the lights." There are many solutions. Run with whatever makes the most sense to you. Don't worry about the "best" way. Hint: you should be adding and removing classes to change the background-color of the light you want to affect.

Here are a few more hints that might help you:

• stopLight.classList.remove("stop-light-go");
• stopLight.classList.add("stop-light-go");
• setInterval(toggleSlow, 1000);

I coded this assignment from scratch in about 45 minutes. So I figure it will probably take you 2-3 hours.

Good luck!