Skip to content

Abdul9010150809/Stopwatch

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Task 2 :- ⏱️ Stopwatch Web Application

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.

🕹️ About the Project

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.

✨ Key Features

  • ⏯️ 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

📂 Project Structure


	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
	

🚀 Live Demo

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/

🛠️ How to Use

  1. Clone the Repository
	git clone https://github.com/Abdul9010150809/SCT_WD_2.git
	cd SCT_WD_2
  1. Open index.html in Your Browser

  2. Double-click index.html, or

    Use Live Server in VS Code for real-time preview

  3. Use the Stopwatch

  4. Click Start to begin timing

  5. Click Pause to stop the clock

  6. Click Lap to save a lap time

  7. Click Reset to clear everything

  8. Export laps via the Export CSV button

  9. Switch between light/dark modes using the toggle

🖼️ Screenshots

  • ☀️ Light Mode -- img1.jpg

  • 🌙 Dark Mode -- img2.jpg

📋 Sample CSV Output

Displayed directly on-screen and downloadable:

Lap Time
00:00:03.215
00:00:08.793
00:00:12.087

🤝 Contributions

Suggestions for improvements, UI tweaks, or performance upgrades? Pull requests are always welcome!

📬 Contact

Have questions or ideas? Let's connect:

📧 Email: SHAIK.ABDULSAMMED@outlook.com 🔗 GitHub: https://github.com/Abdul9010150809

✅ Made with Precision & Purpose

❤️ By Abdul Sammed as a part of Skill Craft Intern

About

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.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors