Welcome to the Stopwatch Web Application! This advanced-level, interactive stopwatch is built using HTML, CSS, and JavaScript—completely on the frontend with no backend or database involved. Developed as part of the Skill Craft Internship, this app offers lap tracking, CSV export, theme toggling, and persistent session features.
This project helps users measure time intervals with precision. You can start, pause, reset the stopwatch, record lap times, export lap data as CSV, and switch between light and dark modes. All data is handled in-browser using localStorage.
-
⏯️ Start, Pause, Reset timer with millisecond accuracy
-
🏁 Lap time recording and display
-
📄 CSV Export – download and view lap times in .csv format
-
🌗 Light/Dark mode toggle with memory
-
💾 Session persistence – laps remembered via localStorage
-
🔊 Beep sound feedback on actions
-
🖥️ Responsive UI with smooth animations
-
📋 CSV data also rendered on-screen for immediate viewing
SCT_WD_2/
|── .github/
| └── workflows/
| └── deploy.yml # 🚀 GitHub Actions deployment workflow
├── index.html # Main HTML file
├── style.css # CSS styles (themes, layout, effects)
├── script.js # Core stopwatch logic with DOM interaction
├── README.md # 📘 Project documentation
├── output.pdf # 🖨️ Output snapshots in PDF format
├── images/ # 🖼️ UI screenshots for documentation
│ ├── img1.jpg #bright mode
│ └── img2.jpg #dark mode
├── sounds/
└── beep.mp3
Once you push this to a public GitHub repository and enable GitHub Pages, your stop watch will be live at:
https://<your-github-username>.github.io/<repository-name>/
Example for your profile: ➡️ https://abdul9010150809.github.io/SCT_WD_2/
- Clone the Repository
git clone https://github.com/Abdul9010150809/SCT_WD_2.git
cd SCT_WD_2-
Open index.html in Your Browser
-
Double-click index.html, or
Use Live Server in VS Code for real-time preview
-
Use the Stopwatch
-
Click Start to begin timing
-
Click Pause to stop the clock
-
Click Lap to save a lap time
-
Click Reset to clear everything
-
Export laps via the Export CSV button
-
Switch between light/dark modes using the toggle
-
☀️ Light Mode -- img1.jpg
-
🌙 Dark Mode -- img2.jpg
Displayed directly on-screen and downloadable:
Lap Time
00:00:03.215
00:00:08.793
00:00:12.087
Suggestions for improvements, UI tweaks, or performance upgrades? Pull requests are always welcome!
Have questions or ideas? Let's connect:
📧 Email: SHAIK.ABDULSAMMED@outlook.com 🔗 GitHub: https://github.com/Abdul9010150809