Skip to content

README.md

Latest commit

 

History

History
117 lines (71 loc) · 3.28 KB

README.md

File metadata and controls

117 lines (71 loc) · 3.28 KB

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