Katkat
Back

Implement a traffic-light UI with JS

SalesforceSoftware Engineer · Technical Screen
MediumSoftware EngineerTechnical ScreenCoding & Algorithms

Last updated

This question evaluates front-end web development competencies, including DOM manipulation, CSS-driven UI state, JavaScript timing and asynchronous state management for interactive components.

Frontend Coding: Traffic Light

Build a simple traffic light component using HTML + CSS + JavaScript.

Requirements

  • Render a vertical traffic light with three circles: red, yellow, green.
  • Exactly one light is “on” at a time (brighter color); the others are “off” (dimmed).
  • The light should cycle automatically in this order:
  1. Red for R milliseconds
  2. Green for G milliseconds
  3. Yellow for Y milliseconds
  4. Repeat
  • Provide a simple way to start the cycle when the page loads (e.g., window.onload).

Optional extensions (if time)

  • Add Start / Pause / Reset controls.
  • Allow changing R/G/Y durations without reloading.
  • Ensure timers don’t stack (no multiple overlapping intervals/timeouts).

Deliverable

  • A single HTML page (or separate HTML/CSS/JS files) that demonstrates the cycling traffic light in a browser.