Traffic Light Challenge

Problem Description

Create a simulated traffic light. The traffic light should cycle through red, yellow, and green lights automatically, mimicking the behavior of a real traffic signal.

Requirements

1. Display three lights: red, yellow, and green.
2. Automatically cycle through the lights in a customizable order.
3. Each light should be customizable with:
   • Duration (how long it stays active)
   • Color (background color when active)
   • Next state (which light comes next)
4. Only one light should be active at a time.
5. The cycle should repeat indefinitely.
6. Support different layouts (vertical/horizontal)

Design First!

Before looking at the implementation hints below, try to:

1. Design the component structure on your own
2. Think about how you would manage state transitions
3. Consider how to make it customizable (colors, timing, order)
4. Plan your component's API (props)

Implementation Hints

If you're stuck or want to validate your approach, here's one way you could structure the component's API:

Possible Props Structure

Example configuration:

You might also want to support different layouts:

Remember: This is just one possible implementation. Feel free to design your own API structure!

Getting Started

You can create a new project or use our CLI tool to use the starter template.

First Time Setup

Start Working

Solution

To view the reference solution:

How to Review Your Solution

• axe-core is pre-integrated in the starter template. To use it:

1. Open your browser's Developer Tools (F12)
2. Check the Console tab while using your app
3. Review and fix accessibility errors that appear (ignore minor errors)

• Test your app with keyboard to ensure full keyboard navigation (if applicable)

• Add ARIA labels to make your app understandable by screen readers

• Use Claude for a final accessibility & quality check.

  Example Prompt for Claude:

  Then paste your code..

How to Share Your Solution

If you used the CLI tool

1. Fork the frontend-challenges repository
2. Add your fork as a new remote to your existing solution:

3. Open a pull request (PR) from your fork to the main repository.

If you started from scratch

1. Fork the frontend-challenges repository and clone it
2. Navigate to the solution directory:

3. Add your solution files in this directory
4. Push your changes to your fork
5. Open a pull request (PR) to contribute your solution

Need help?

• Follow this guide to making a pull request to an open-source project
• OR, create an issue at frontend-challenges