#18Traffic Light
Overview
Build a traffic light component where the lights switch automatically in a continuous loop, following real-world traffic light timing.
Requirements
- The traffic light should start with the red light active.
- After a short period, it should switch automatically to green.
- After another interval, it should switch to yellow.
- After the full cycle, it should return to red and repeat indefinitely.
- Only one light should be active at any given time.
- The timing between color transitions must match the defined cycle durations.
Notes
- Each light should visually indicate when it is active or inactive.
- Inactive lights must appear dimmed or covered by an overlay.
- The sequence of transitions must repeat continuously without user interaction.
- Ensure the timing of transitions aligns with the test expectations:
- Red → Green after 2 seconds
- Green → Yellow after a total of 3 seconds
- Yellow → Red after a total of 3.5 seconds
Tests
- starts on red
- changes to green after 2s
- changes to yellow after 3000ms total
- returns to red after full cycle 3500ms