Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/atia-farha/stopwatch
A sleek, minimalistic and functional stopwatch with lap time recording and animations with PWA (Progressive Web App) support. Perfect for timing events, workouts, and more!
https://github.com/atia-farha/stopwatch
css3 font-awesome-5 html-css-javascript html5 javascript keyboard-shortcuts pwa pwa-app stopwatch stopwatch-using-javascript stopwatch-web-application stopwatch-website timer
Last synced: 24 days ago
JSON representation
A sleek, minimalistic and functional stopwatch with lap time recording and animations with PWA (Progressive Web App) support. Perfect for timing events, workouts, and more!
- Host: GitHub
- URL: https://github.com/atia-farha/stopwatch
- Owner: Atia-Farha
- License: other
- Created: 2024-07-29T15:47:00.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-12-09T06:38:00.000Z (about 1 month ago)
- Last Synced: 2024-12-09T07:30:35.222Z (about 1 month ago)
- Topics: css3, font-awesome-5, html-css-javascript, html5, javascript, keyboard-shortcuts, pwa, pwa-app, stopwatch, stopwatch-using-javascript, stopwatch-web-application, stopwatch-website, timer
- Language: JavaScript
- Homepage: https://atia-farha.github.io/stopwatch/
- Size: 458 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Stopwatch Website
A sleek, minimalistic and functional stopwatch with lap time recording and animations with PWA (Progressive Web App) support. Perfect for timing events, workouts, and more.
![Preview](/assets/preview.png)
## Table of Contents
- [Project Structure](#project-structure)
- [Technologies Used](#technologies-used)
- [Features](#features)
- [Usage](#usage)
- [Keyboard Shortcuts For Buttons](#keyboard-shortcuts-for-buttons)
- [Reporting Issues](#reporting-issues)## Project Structure
```plaintext
stopwatch/ # Root directory
├── index.html # Main HTML file
├── src/ # Source code directory
│ ├── css/ # Directory for stylesheets
│ │ └── style.css # Main CSS file for styling
│ └── js/ # Directory for JavaScript files
│ ├── script.js # Core JavaScript file
│ └── sw.js # Service Worker script for PWA
├── manifest.json # Web App Manifest for PWA configuration
├── assets/ # Directory for static assets
│ ├── favicon.png
│ ├── preview.png
│ └── screenshot.png
├── icons/ # Directory for app icons in various sizes
│ ├── icon-72x72.png
│ ├── icon-96x96.png
│ ├── icon-128x128.png
│ ├── icon-144x144.png
│ ├── icon-152x152.png
│ ├── icon-192x192.png
│ ├── icon-384x384.png
│ └── icon-512x512.png
├── README.md # Project documentation
└── LICENSE # License file
```## Technologies Used
- HTML
- CSS
- JavaScript
- PWA (Progressive Web App)## Features
- **Start, Stop, Reset:** Control the stopwatch by intuitive buttons with keyboard shortcuts.
- **Lap Times:** Record multiple lap times.
- **Animations:** Visual feedback with animation effects for buttons and display.
- **PWA Installation:** Install the stopwatch as an app on your device.
- **Offline Support:** Offline support on PWA.![Preview](/assets/screenshot.png)
## Usage
1. Simply open this link.
2. Click the start button to start timing.
3. Click the lap button to record lap times.
4. Click the stop button to stop the timer.
5. Click the reset button to reset the stopwatch.*Ensure that you already have an installed web browser (Chrome, Firefox, etc.) on your device.
## Keyboard Shortcuts for Buttons:
- **Start** & **Stop**: `Spacebar` or `CTRL + CTRL`
- **Lap**: `Shift`
- **Reset**: `Enter`## Reporting Issues
If you encounter any bugs or have suggestions for improvement, please report them in the Issues section of this GitHub repository. I will address them promptly.
© Designed and developed by Atia Farha | ALL RIGHTS RESERVED