To run this project locally, download/clone this repository, then in the project directory, run:
and after that:
(make sure you have Node.JS installed)
This will run the app in the development mode.
Open http://localhost:1317 to view it in your browser.
You can also view a live demo here: View live demo here: https://radiant-valkyrie-f763d4.netlify.app/
For this challenge we'd like to see the following:
- Understanding of the concept of "finite state machines";
- Being able to implement the idea of a state machine in a web page;
- Using a (well documented) package/library to solve a problem.
A traffic light is a great example for a state machine. The traffic light can (normally) only be in only one state. The light is either Green, Yellow or Red. It can never be two colors at the same time.
- The traffic light starts with a Green light;
- After 5 seconds the traffic light turns Yellow;
- After 2 seconds the traffic light turns Red;
- After 5 seconds the traffic light turns Green again, etc.
There is a special case where emergency services, like police and ambulances can temporarily override a traffic light state.
They can remotely press a button and put the traffic light in an "emergency state".
This means the Yellow light blinks 5 times. This gives them the opportunity to safely pass the crossing.
- Create the HTML, Css and Javascript to visualize a working traffic light;
- Use XState to power the state machine;
- Add a button which acts as an emergency override. Pressing this button must enable trigger the emergency state;
- Try to use vanilla JavaScript for this case and not rely on frameworks and libraries like Vue or React.