Traffic Light: Implement a Timed Traffic Light State Machine in JavaScript

Question

## Round 1 - Frontend / Coding

Implement a traffic light component and its underlying state machine. The light cycles: green (30s) -> yellow (5s) -> red (25s) -> green ...

Implement a `TrafficLight` class:

```javascript
class TrafficLight {
  constructor() {
    // states: 'green', 'yellow', 'red'
    // durations: green=30000ms, yellow=5000ms, red=25000ms
  }

start() { /* begin cycling */ }
  stop()  { /* halt, stay in current state */ }
  getCurrentState() { /* returns current state string */ }
  onStateChange(callback) { /* callback(newState) on each transition */ }
}
```

**Example:**
```
const light = new TrafficLight();
light.onStateChange(s => console.log(s));
light.start();
// logs: "green" after 30s -> "yellow" after 5s -> "red" after 25s -> "green" ...
light.stop(); // stops wherever it is
```

## Round 2 - React Component

Render the light as a visual component with three circles. The active state's circle should be colored; others gray.

## Follow-ups

1. How do you handle the case where `stop()` is called before the first timeout fires?
2. How would you make the durations configurable per state at construction time?
3. How would you test this class without waiting for real timers? (hint: Jest fake timers)
4. How would you coordinate multiple traffic lights at an intersection so they never show green simultaneously?

Traffic Light: Implement a Timed Traffic Light State Machine in JavaScript

Question Details

Full Details

Topics

More from Roblox