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.
The stop light is made up of 4 divs. No images required.
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.
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.