https://github.com/darshanas17/digital-timer-app-react
A React-based Digital Timer App that allows users to set a timer, start/pause/reset it, and modify the timer duration dynamically.
https://github.com/darshanas17/digital-timer-app-react
css es6-modules html javascript reactjs state-management timer
Last synced: 2 months ago
JSON representation
A React-based Digital Timer App that allows users to set a timer, start/pause/reset it, and modify the timer duration dynamically.
- Host: GitHub
- URL: https://github.com/darshanas17/digital-timer-app-react
- Owner: Darshanas17
- Created: 2025-03-26T03:25:32.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-26T03:29:29.000Z (about 1 year ago)
- Last Synced: 2025-03-26T04:24:32.068Z (about 1 year ago)
- Topics: css, es6-modules, html, javascript, reactjs, state-management, timer
- Language: JavaScript
- Homepage: https://darshanas17.github.io/Digital-Timer-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
# Digital Timer App
A React-based **Digital Timer App** that allows users to set a timer, start/pause/reset it, and modify the timer duration dynamically.
## 🚀 Live Demo
[Click Here to View the App](https://darshanas17.github.io/Digital-Timer-App-React/)
## 📸 Preview
---
## 🎯 Features
- Default timer set to **25 minutes**
- **Start/Pause Timer:** Play and pause the countdown
- **Modify Timer Duration:** Increase/decrease the timer limit before starting
- **Disable Buttons:** `+` and `-` buttons are disabled while the timer is running
- **Reset Timer:** Resets to the default time
- **Timer Status:** Shows **Running** or **Paused**
---
## 🛠️ Installation & Setup
1. Clone the repository:
```sh
git clone https://github.com/Darshanas17/Digital-Timer-App-React.git
cd digital-timer-app
```
2. Install dependencies:
```sh
npm install
```
3. Run the application:
```sh
npm start
```
---
## 📝 Implementation Details
### **Technologies Used**
- React.js
- CSS (for styling)
- JavaScript (ES6+)
### **File Structure**
```
├── src
│ ├── components
│ │ ├── DigitalTimer
│ │ │ ├── index.js
│ │ │ ├── index.css
│ ├── App.js
│ ├── index.js
├── package.json
```
---
## 🎮 How to Use?
1. Click **Start** to begin countdown
2. Click **Pause** to stop temporarily
3. Use `+` or `-` buttons to adjust timer **before starting**
4. Click **Reset** to restore default settings
---
## 📂 Resources
### **Icons Used**
- [Play Icon](https://assets.ccbp.in/frontend/react-js/play-icon-img.png)
- [Pause Icon](https://assets.ccbp.in/frontend/react-js/pause-icon-img.png)
- [Reset Icon](https://assets.ccbp.in/frontend/react-js/reset-icon-img.png)
### **Colors Used**
- `#ffffff` (White)
- `#cffcf1` (Light Green)
- `#1e293b` (Dark Blue)
- `#0f172a` (Blackish Blue)
- `#defafe` (Light Cyan)
- `#00d9f5` (Bright Cyan)
---
## 📜 License
This project is licensed under the **MIT License**.
---
## 🤝 Contributing
Feel free to fork and contribute to this project.
1. Fork the repository
2. Create a new branch (`feature/your-feature`)
3. Commit your changes
4. Push to the branch
5. Open a Pull Request