FrontendInterviews.dev

Loading problem…

784. Traffic Light

Easy•

Build a traffic light that cycles continuously through three vehicle signals using fixed durations.

Requirements

1. Signal cycle

  • Start on green.
  • Repeat forever: green → yellow → red → green.

2. Timing (use these exact values)

SignalDuration
Green3000ms
Yellow500ms
Red4000ms

3. Rendering

  • Always render three lamps (red, yellow, green).
  • Exactly one is active at a time; the active one must be obvious.

4. Timers & lifecycle

  • Use one scheduled timeout per step (avoid overlapping setInterval loops).
  • Clear pending timeouts on cleanup so unmount and re-renders do not leak or double-schedule.

Time target: ~25–35 minutes.

Constraints

  • Cycle order must be green → yellow → red → green, repeating.
  • Only one vehicle signal may be active at any time.
  • Use the stated durations exactly: green 3000ms, yellow 500ms, red 4000ms.
  • Timers must be cleaned up so transitions stay deterministic (no duplicate loops or leaks).