https://github.com/mirianalejandra1996/super-speedometer

🏃💨 Virtual application to measure the real speed. Inspired by speed lovers ⚡, for those who like to take their own control. 🚥 🚗💨
https://github.com/mirianalejandra1996/super-speedometer

figma front-end-development html innovation jsx laboratoria reactjs sass speed speedometer technology vector-graphics website

Last synced: 14 days ago
JSON representation

🏃💨 Virtual application to measure the real speed. Inspired by speed lovers ⚡, for those who like to take their own control. 🚥 🚗💨

• Host: GitHub
• URL: https://github.com/mirianalejandra1996/super-speedometer
• Owner: mirianalejandra1996
• Created: 2022-05-17T15:58:10.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-05-17T18:33:20.000Z (over 2 years ago)
• Last Synced: 2024-11-10T17:19:24.421Z (2 months ago)
• Topics: figma, front-end-development, html, innovation, jsx, laboratoria, reactjs, sass, speed, speedometer, technology, vector-graphics, website
• Language: JavaScript
• Homepage: https://super-speedometer-app.netlify.app/
• Size: 312 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Super Speedometer 🚥

Project developed with React js, using the command [Create React App](https://github.com/facebook/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](https://www.figma.com/)



To view the prototypes you can click on this [Link](https://www.figma.com/file/DhjZLj5EUJPbUpt84bPRIz/Speedometer?node-id=0%3A1)

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](https://www.netlify.com/), in which you have access in the following [Link](https://super-speedometer-app.netlify.app/)

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

## Author 🎇

[🙋🏽‍♀️ Mirian Alejandra Arévalo](https://github.com/mirianalejandra1996).

📧 Contact me on: [email protected]