Super Speedometer 🚥

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.

Design Considerations ✏️

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.

Application development process 👩🏽‍💻

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.

Final result of the project 🎯

This application was deployed in Netlify, in which you have access in the following Link

https://super-speedometer-app.netlify.app/

Author 🎇

🙋🏽‍♀️ Mirian Alejandra Arévalo.

📧 Contact me on: mirianalejandra1996@gmail.com