Back to Repositories
JavaScript
assignment-traffic-light
React coding test for Devise Stockholm: traffic lights whose colour sequence runs on React state and timers rather than CSS animations.
0 stars
0 forks
1 watchers
csshtmljavascript
Stack
JavaScriptReact 18Create React AppCSS
Features
Signals
- Level 1: red, yellow and green light up one at a time on a one-second interval, repeating forever
- Level 2: longer timings of two seconds on red and green and one second on yellow
- Each signal keeps its timings in one array, so they are easy to change
Lamps
- Reusable Lamp component that takes a colour and an active flag
- Inactive lamps drop to 50% opacity
- Colour changes driven by useState and setTimeout, not CSS animations
Brief and solutions
- Collapsible Instructions panel with the original brief, colour palette and reference animations for both levels
- Collapsible Solutions panel that runs both signals live
Quick Start
- 1
Clone the repository
git clone https://github.com/tec-smith/assignment-traffic-light.git - 2
Enter the project folder
cd assignment-traffic-light - 3
Install dependencies
npm install - 4
Start the dev server
npm start - 5
Open Solutions to watch both signals run