https://github.com/darshanas17/stopwatch-app-react
The Stopwatch App is a simple and interactive React application that allows users to start, stop, and reset a stopwatch. It demonstrates the use of React state and event handling.
https://github.com/darshanas17/stopwatch-app-react
css es6-modules html javascript reactjs state-management ui-design
Last synced: 2 months ago
JSON representation
The Stopwatch App is a simple and interactive React application that allows users to start, stop, and reset a stopwatch. It demonstrates the use of React state and event handling.
- Host: GitHub
- URL: https://github.com/darshanas17/stopwatch-app-react
- Owner: Darshanas17
- Created: 2025-03-26T03:22:47.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-26T04:45:40.000Z (about 1 year ago)
- Last Synced: 2025-03-26T05:28:25.411Z (about 1 year ago)
- Topics: css, es6-modules, html, javascript, reactjs, state-management, ui-design
- Language: JavaScript
- Homepage: https://darshanas17.github.io/Stopwatch-App-React/
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ⏱️ Stopwatch App
## 🚀 Live Demo
[Click here to view the demo](https://Darshanas17.github.io/Stopwatch-App-React/)
### Refer to the image below:
## 📌 Overview
The **Stopwatch App** is a simple and interactive React application that allows users to start, stop, and reset a stopwatch. It demonstrates the use of React state and event handling.
## ✨ Features
- **Start Stopwatch:** Start the timer with a single click.
- **Stop Stopwatch:** Pause the timer anytime.
- **Reset Stopwatch:** Reset the timer back to zero.
- **Responsive Design:** Works smoothly across all screen sizes.
## 🛠️ Tech Stack
- **React.js** - Frontend UI
- **CSS** - Styling
## ⚙️ Installation & Setup
Follow these steps to set up the project locally:
1. **Clone the Repository**
```bash
git clone https://github.com/Darshanas17/Stopwatch-App-React.git
cd Stopwatch-App-React
```
2. **Install Dependencies**
```bash
npm install
```
3. **Run the Application**
```bash
npm start
```
4. Open the browser and visit `http://localhost:3000/` to see the app in action.
## 📁 Components Structure
The application consists of the following component:
- **Stopwatch** (`src/components/Stopwatch/`)
## 🎯 Functionality
- Click **Start** to begin counting time.
- Click **Stop** to pause the timer.
- Click **Reset** to reset the timer to zero.
## 🎨 Design & Assets
- UI designed using **Roboto** font.
- Colors used:
- `#ffffff` (White)
- `#333333` (Dark Grey)
- `#1db05f` (Green - Start Button)
- `#ef0d36` (Red - Stop Button)
- `#eaa800` (Yellow - Reset Button)
- Icons and images sourced from: [CCBP Assets](https://assets.ccbp.in/frontend/react-js/)
## 👨💻 Author
**Darshan A S**
- [LinkedIn](https://www.linkedin.com/in/darshan-a-s/)
- [Portfolio](https://darshanas17.github.io/darshan-as-17-portfolio/)
## 📜 License
This project is licensed under the **MIT License**.