Skip to content

ark0078/counter-app

 
 

Repository files navigation

⏱️ Counter App - Stopwatch Application

Welcome to the Counter App, a simple stopwatch application built using React and Vite. This app allows users to measure time intervals with features for starting, pausing, and resetting the stopwatch.

📋 Table of Contents

  • Introduction
  • Features
  • Installation
  • Usage
  • How It Works
  • Functionality Overview
  • Video Demo
  • Contributing
  • License

✨ Features

  • Start, pause, and reset stopwatch functionality
  • Real-time time display
  • Easy-to-use and responsive user interface
  • Fast performance with Vite for development
  • Deployed version available (optional: include link)

🛠️ Installation

Follow these steps to get the Counter App up and running on your local machine.

  1. Clone the repository
    git clone https://github.com/yourusername/counter-app.git
  2. Navigate to the project directory
    cd counter-app
  3. Install dependencies
    npm install
  4. Start the development server
    npm run dev

Vite will launch the app in your default browser at http://localhost:5173.

🚀 Usage

  1. Start/Stop: Click the 'Start' button to begin timing, and the same button will turn into 'Stop' when the timer is running.
  2. Pause/Resume: Pause the stopwatch by pressing the 'Stop' button and resume with 'Start'.
  3. Reset: Reset the timer to zero by clicking the 'Reset' button.

⚙️ How It Works

The Counter App uses React's state management to control the stopwatch functionality. When the 'Start' button is pressed, the app starts counting time using setInterval(), and when paused or stopped, it clears the interval. Time is displayed in real-time by continuously updating the state.

🔧 Functionality Overview:

  • Start Timer: Initializes the timer using a setInterval function, updating every 100 milliseconds.
  • Pause Timer: Stops the interval without resetting the elapsed time.
  • Reset Timer: Clears the interval and resets the state to the initial value of 00:00:00.

🎥 Video Demo

Check out the app in action by watching this demo:

counter-app-video-demo.1.mp4

🤝 Contributing

Contributions are welcome! If you would like to make any changes, feel free to fork the repository and submit a pull request.

  1. Fork the repository
  2. Create a new branch for your feature: git checkout -b feature-branch
  3. Commit your changes: git commit -m 'Add new feature'
  4. Push to the branch: git push origin feature-branch
  5. Submit a pull request

For more detailed guidelines on contributing, please refer to the Contributing.md file.

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

Our Valuable Contributors ❤️✨

Contributors


Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 62.4%
  • CSS 35.7%
  • HTML 1.9%