https://github.com/nidhiupman568/stopwatch-using-react.js
🎉 Welcome to the Stopwatch project! 🎉 This simple yet powerful stopwatch application is built using ReactJS ⚛️. The stopwatch comes with functionalities to Start ▶️, Pause ⏸️, Resume 🔄, and Reset 🔁, making it a perfect tool for all your timing needs. ⌚
https://github.com/nidhiupman568/stopwatch-using-react.js
css front-end-development html javascript learning-reactjs reactjs reactjs-developer stop-watch web-development
Last synced: 2 months ago
JSON representation
🎉 Welcome to the Stopwatch project! 🎉 This simple yet powerful stopwatch application is built using ReactJS ⚛️. The stopwatch comes with functionalities to Start ▶️, Pause ⏸️, Resume 🔄, and Reset 🔁, making it a perfect tool for all your timing needs. ⌚
- Host: GitHub
- URL: https://github.com/nidhiupman568/stopwatch-using-react.js
- Owner: nidhiupman568
- Created: 2024-07-15T15:13:04.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2024-08-28T13:19:59.000Z (8 months ago)
- Last Synced: 2025-01-10T02:35:45.198Z (4 months ago)
- Topics: css, front-end-development, html, javascript, learning-reactjs, reactjs, reactjs-developer, stop-watch, web-development
- Language: JavaScript
- Homepage: https://stop-watch-nidhiupman-using-react-js.vercel.app/
- Size: 182 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ⏱️ ReactJS Stopwatch Project ⏱️
🎉 Welcome to the **Stopwatch** project! 🎉 This simple yet powerful stopwatch application is built using **ReactJS** ⚛️. The stopwatch comes with functionalities to **Start** ▶️, **Pause** ⏸️, **Resume** 🔄, and **Reset** 🔁, making it a perfect tool for all your timing needs. ⌚
## 📋 Description 📝
The **Stopwatch** ⏲️ is a highly functional and visually appealing ReactJS component that keeps track of time elapsed. With its easy-to-use interface and accurate time tracking, this stopwatch is ideal for tasks that require precision timing ⌛, such as workouts 🏋️♂️, studying 📚, or cooking 🍳.
## 🛠️ Built With 🛠️
- **ReactJS** ⚛️: To create a responsive and dynamic user interface.
- **CSS** 🎨: To style the stopwatch and make it look sleek and modern.
- **JavaScript** 💻: For implementing the logic and functionalities of the stopwatch.
## 🚀 How to Use 🚀
1. **Clone the Repository** 📂:
```bash
git clone https://github.com/nidhiupman568/StopWatch-Using-React.JS.git
```
2. **Navigate to Project Directory** 📁:
```bash
cd stopwatch
```
3. **Install Dependencies** 📦:
```bash
npm install
```
4. **Run the Application** 🏃:
```bash
npm start
```
5. **Open in Browser** 🌐:
Visit `http://localhost:3000` to view your stopwatch in action! 🕒
## 📁 Project Structure 📂
- `src/Components/StopWatch/StopWatch.jsx` 🕒: The main stopwatch component.
- `src/Components/Timer/Timer.jsx` ⏲️: The component displaying the time.
- `src/Components/ControlButtons/ControlButtons.jsx` 🎛️: The component with control buttons like start, pause, resume, and reset.
## 📦 Components Overview 🧩
1. **StopWatch** 🕒: The main component that manages state and controls the flow of time.
2. **Timer** ⏲️: Responsible for displaying the elapsed time.
3. **ControlButtons** 🎛️: Includes buttons to start, pause, resume, and reset the stopwatch.
### 🏗️ States Used in StopWatch Component 🏗️
1. **time** 🕰️: Stores the time elapsed since the stopwatch was started.
2. **isActive** ✅: Indicates whether the stopwatch is currently active (running or paused).
3. **isPaused** ⏸️: Indicates whether the stopwatch is paused while active.
### 🎮 Control Buttons Functionality 🎮
- **Start** ▶️: Begins the stopwatch.
- **Pause** ⏸️: Pauses the running stopwatch.
- **Resume** 🔄: Resumes the stopwatch from where it was paused.
- **Reset** 🔁: Resets the stopwatch back to zero.
## 💻 Installation and Setup ⚙️
Follow these simple steps to set up the project on your local machine:
1. **Create React Application** ⚛️:
```bash
npx create-react-app stopwatch
```
2. **Navigate to Project Directory** 📂:
```bash
cd stopwatch
```
3. **Create Component Structure** 🛠️: Inside the `src` folder, create a `Components` folder with subfolders named `StopWatch`, `Timer`, and `ControlButtons`. Create `.jsx` and `.css` files for each component.
## 🌟 Features 🌟
- Real-time ⏰ time tracking
- Easy to use interface 🎨
- Start, Pause, Resume, and Reset functionalities
- Built with modular React components ⚛️
## 📸 Screenshot 📸
## 🛠️ Running the Application 🏃♂️
To start the application, run the following command from the root directory of the project:
```bash
npm start
```
This will launch the application and open it in your default web browser. 🎉
## 📝 Feedback & Contribution 🤝
We welcome feedback and contributions! Feel free to **fork** 🍴 this repository and submit a **pull request** 📥. If you encounter any issues, please open a ticket in the **issues** section. 💬
Enjoy using the **Stopwatch** and happy coding! 🎉⌛⚛️
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)