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.

What difficulty level is this coding question?

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

What role is this question designed for?

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

Implement a traffic-light UI with JS | Salesforce Coding Question

Implement a traffic-light UI with JS

Company: Salesforce

Role: Software Engineer

Category: Coding & Algorithms

Difficulty: medium

Interview Round: Technical Screen

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

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

You are implementing the timing logic behind a traffic-light UI. The light starts on red at time 0 and cycles forever in this exact order: red for R milliseconds, then green for G milliseconds, then yellow for Y milliseconds, then repeat. Given the three durations and a list of query times, return which light is on at each queried time. A light that starts at time t and lasts D milliseconds is active for the half-open interval [t, t + D).

Constraints

1 <= red_duration, green_duration, yellow_duration <= 10^9
0 <= len(queries) <= 2 * 10^5
0 <= queries[i] <= 10^18

Examples

Input: (5, 4, 2, [0, 4, 5, 8, 9, 10, 11, 12, 20])

Expected Output: ['red', 'red', 'green', 'green', 'yellow', 'yellow', 'red', 'red', 'yellow']

Explanation: The cycle length is 11. Times 0 and 4 are in red, 5 and 8 are in green, 9 and 10 are in yellow, then the cycle repeats at 11.

Input: (1, 1, 1, [0, 1, 2, 3, 4, 5])

Expected Output: ['red', 'green', 'yellow', 'red', 'green', 'yellow']

Explanation: Each light lasts exactly 1 millisecond, so the pattern repeats every 3 milliseconds.

Input: (3, 2, 1, [])

Expected Output: []

Explanation: With no queries, the result is an empty list.

Input: (2, 3, 4, [1, 2, 4, 5, 8, 9, 17, 18])

Expected Output: ['red', 'green', 'green', 'yellow', 'yellow', 'red', 'yellow', 'red']

Explanation: The cycle length is 9. This case checks transitions exactly at boundaries like 2, 5, and 9.

Input: (4, 5, 6, [14, 15, 16, 29, 30, 1000000000])

Expected Output: ['yellow', 'red', 'red', 'yellow', 'red', 'yellow']

Explanation: The cycle length is 15. Time 14 is the last millisecond of yellow, 15 restarts the cycle, and 1000000000 % 15 = 10, which falls in yellow.

Solution

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

Time complexity: O(n), where n is the number of queries. Space complexity: O(n) for the output list.

Hints

The traffic light pattern repeats every red_duration + green_duration + yellow_duration milliseconds.
For each query time, reduce it modulo the total cycle length, then check which interval that position falls into.

Quick Overview

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