https://github.com/ashokravina/speedometer

https://github.com/ashokravina/speedometer

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/ashokravina/speedometer
• Owner: ashokravina
• Created: 2024-07-23T14:02:28.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-07-23T14:13:26.000Z (5 months ago)
• Last Synced: 2024-07-29T13:06:46.351Z (5 months ago)
• Language: HTML
• Size: 177 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
In this project, let's build a **Speedometer** by applying the concepts we have learned till now.

### Refer to the image below:






    






### Design Files

Click to view

- [Extra Small (Size < 576px) and Small (Size >= 576px)](https://assets.ccbp.in/frontend/content/react-js/speedometer-sm-output.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px)](https://assets.ccbp.in/frontend/content/react-js/speedometer-lg-output.png)

### Set Up Instructions

Click to view

- Download dependencies by running `npm install`

- Start up the app using `npm start`

### Completion Instructions

Functionality to be added




The app must have the following functionalities

- The speed should initially be 0mph

  > Here mph means Miles per hour

- When Accelerate button is clicked,

  - If the speed is less than 200mph, the speed should be increased by 10mph

  - If the speed is equal to 200mph, the speed should not be increased

- When Apply Brake button is clicked

  - If the speed is greater than 0mph, then the speed should be decreased by 10mph

  - If the speed is equal to 0mph, the speed should not be decreased

Implementation Files




Use these files to complete the implementation:

- `src/components/Speedometer/index.js`

- `src/components/Speedometer/index.css`

### Quick Tips

Click to view




- You can use the below cursor CSS property for buttons to set the type of mouse cursor, to show when the mouse pointer is over an element,

  ```

    cursor: pointer;

  ```

  


   

- You can use the below outline CSS property for buttons and input elements to remove the highlighting when the elements are clicked,

  ```

    outline: none;

  ```

### Resources

Image URLs

- [https://assets.ccbp.in/frontend/react-js/speedometer-img.png](https://assets.ccbp.in/frontend/react-js/speedometer-img.png) alt should be **speedometer**

Colors




Hex: #07080c

Hex: #ffffff

Hex: #cbd5e1

Hex: #0b69ff

Hex: #94a3b8


Font-families

- Roboto

> ### _Things to Keep in Mind_

>

> - All components you implement should go in the `src/components` directory.

> - Don't change the component folder names as those are the files being imported into the tests.

> - **Do not remove the pre-filled code**

> - Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.