Fork, Commit, Merge - Medium Issue 2 (React.js)

[nikohoffren]

Fork, Commit, Merge - Medium Issue 2 (React.js)

Create a Traffic Light Component

Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away!

How to get started:

Start by navigating inside of the directory used in this project with the command:

cd tasks/react/medium/traffic-light

Then run npm i to install Vite, React and all the necessary dependencies for the project.

After installing the dependencies you can open the src directory and the TrafficLight.tsx file, and start implementing your solution!

Description:

Create a React component using TypeScript that simulates a traffic light. The component should display three lights (red, yellow, and green) and switch between them automatically in the order of a typical traffic light sequence.

Requirements:

• Implement a TrafficLight component in src/TrafficLight.tsx.
• Use TypeScript for type safety.
• The component should render three circles, colored red, yellow, and green.
• The traffic light should start with the red light.
• After a few seconds, it should change to green, then yellow, and then back to red in a continuous loop.
• Only one light should be "active" (brighter) at a time.

There are some CSS classes already added for you in the src/App.css file, which you can use if you like, or write your own custom CSS.
There is for example a helper pseudo-class selector for every light that is not active, which will set the light color to gray if the light does not have the active class:

Example:

The traffic light should cycle as follows:

• Red (active) for 4 seconds.
• Green (active) for 3 seconds.
• Yellow (active) for 1 second.
• Repeat the cycle.

How to run:

After you are done with the card, make sure you are in the tasks/react/medium/traffic-light in your terminal and run npm run dev to start the Vite server. Then, open "http://localhost:5173/" in your browser to check how the app looks.

If it looks to be working fine, you are ready to make a pull request!

---

To work with this issue, you need to have npm and NodeJS installed to your local machine.
Check out README.md for more instructions of installing npm and NodeJS as well as how to make a pull request.

---

Why use Vite?

This React project uses Vite for near-instant server start-ups and incredibly fast hot module replacements, providing a smooth and efficient development experience.
Also Vite requires minimal setup, allowing us to focus on writing React code without getting bogged down in complex configurations.
If you want to learn more about Vite, check out the documentation:
Vite Official Documentation

---

Feel free to ask any questions here if you have some problems!

Also, kindly give this project a star to enhance its visibility for new developers!