Stopwatch Timer

A simple and elegant stopwatch application built in vanilla JavaScript, featuring smooth animations and theme customization.

Features

• Accurate Time Tracking - Tracks hours, minutes, and seconds precisely
• Start/Stop Controls - Easy to use interface with clear button states
• Reset Functionality - Quick reset to start timing again
• Dark/Light Theme - Toggle between themes with persistent storage
• Responsive Design - Works seamlessly on desktop and mobile devices
• Visual Feedback - Blinking animation when timer is stopped

How to Use

1. Open index.html in your browser
2. Click "Start Time" to begin the stopwatch
3. Click "Stop Time" to pause the timer
4. Click "Reset" to clear the timer back to 00:00:00
5. Use the theme toggle to switch between light and dark modes

Technologies Used

• HTML5
• CSS3 (Animations & Responsive Design)
• JavaScript (ES6)
• Bootstrap 5

Project Structure

├── index.html      # Main HTML structure
├── style.css       # Custom styles and animations
├── script.js       # Timer logic and functionality
└── bootstrap/      # Bootstrap framework (This folder isn't the part of this repo, you can manually add bootstrap folder 
                                           or using bootstrap cdn link in index.html file)

Key Features Implementation

The stopwatch uses setInterval() for accurate time tracking and manages button states to prevent multiple timers from running simultaneously. Theme preferences are saved in localStorage for a consistent user experience across sessions.

Setup

No installation required. Simply clone and open in your browser.

git clone https://github.com/UmarAli57/stopwatch-timer.git
cd stopwatch-timer

Author

Umar Ali
Email: umar.pwu786@gmail.com

License

MIT License - feel free to use this project for learning purposes.