Build an Auto-Rotating Traffic Light in Vanilla JavaScript Without a Framework

Build a traffic light in the browser using only plain HTML, CSS and JavaScript, with no framework or library. The light has three lamps, red, yellow and green, and exactly one lamp is lit at any time. Once started, the light rotates through its colors automatically and indefinitely: green, then yellow, then red, then green again, with each color staying lit for its own duration. Write the markup, the styles, and a reusable JavaScript component that runs the rotation. ```hint Describe it as data Before writing any timer code, write down the sequence of colors, how long each one lasts, and what comes next, as a plain data structure. ``` ```hint One pending timer Consider what happens to your timers if `start` is called twice, or if the light is removed from the page while it is running. ``` ```hint Update, do not rebuild Decide whether each color change should rebuild the markup or only change the state of elements that already exist. ``` ### Constraints and Clarifications - No framework or library: use DOM APIs, CSS and JavaScript only. - Each color's duration is configuration, not a constant buried in the rendering code. ### Clarifying Questions - Is the sequence always green, yellow, red, or are there regional variants such as red and yellow lit together before green? - Should durations be configurable per light, and can they change while the light is running? - Are start, stop or pause controls needed, or does the light run as soon as the page loads? - Can several lights appear on one page, and must any of them be synchronized, for example at a crossing? - Which browsers must be supported? ### What a Strong Answer Covers - A data-driven state machine for the sequence and its durations - Correct timer handling: a single pending timer, clean start and stop, and no leaks when the light is removed - Efficient DOM updates, semantic and accessible markup, and CSS for the visual states - A reusable component interface that supports several independent lights on one page - Awareness of timer drift and background-tab throttling, and a way to test the timing logic ### Follow-up Questions - Add a pedestrian button that shortens the current green phase. How does your state machine change? - Two lights at a crossing must never be green at the same time. How do you coordinate them? - How would you unit-test the rotation without waiting real seconds? - Browsers throttle timers in background tabs. What happens when the user returns to the tab, and does it matter?