Implement a traffic-light UI with JS

Q: Implement a traffic-light UI with JS

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

Q: How do I practice coding and algorithm questions?

Use PracHub's coding console to write, test, and debug your solutions in Python or JavaScript. View hints, test against sample inputs, and compare with official solutions.

Q: What difficulty level is this coding question?

This is a medium difficulty Coding & Algorithms question, commonly asked during Technical Screen rounds at Salesforce.

Q: What role is this question designed for?

This question is commonly asked for Software Engineer candidates at Salesforce during technical interviews.

Question

## 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.

PracHub · Accepted Answer

def solution(red_duration, green_duration, yellow_duration, queries):
    cycle = red_duration + green_duration + yellow_duration
    red_end = red_duration
    green_end = red_duration + green_duration

result = []
    for t in queries:
        position = t % cycle
        if position < red_end:
            result.append('red')
        elif position < green_end:
            result.append('green')
        else:
            result.append('yellow')
    return result

Quick Overview

Solution

Hints

Quick Overview