Project developed with React js, using the command Create React App.
This application is a virtual tool Inspired by speed lovers, for those who like to play with speed and that for others often goes unnoticed.
This instrument allows the user to simulate the speed of a vehicle or person, and show on the screen with the help of the needle if it exceeds or not.
This project followed the requirements of a challenge, which are the following:
-
Create a box using styles that has three states: green, yellow, and red. The states should automatically change every 2 seconds.
-
Create a component called "Speedometer" as shown in the image that receives a value between 0 and 100 and displays the value and changes the position of the needle accordingly.
Suggestion: create the component using SVG graphics.
-
It should be possible to enter the number [0 - 100] in the "Message to Update" field and after pressing the ENTER key, the value in the created SPEEDOMENTER should be updated.
At this stage, the theme of styles is very important, the aim is to obtain a visual theme that is as similar as possible to the one shown in the image.
The vectors were designed with the use of Figma
To view the prototypes you can click on this Link
Regarding the code, certain error handling was done by adding respective validations in the input so that the user can enter only numerical values ββbetween 1-100.
This application was deployed in Netlify, in which you have access in the following Link
https://super-speedometer-app.netlify.app/
ππ½ββοΈ Mirian Alejandra ArΓ©valo.
π§ Contact me on: mirianalejandra1996@gmail.com