https://github.com/atia-farha/counter-web-app
A simple and minimalistic counter web app with keyboard shortcuts and local storage support. Perfect for counting events, tracking activities and more.
https://github.com/atia-farha/counter-web-app
Last synced: 3 months ago
JSON representation
A simple and minimalistic counter web app with keyboard shortcuts and local storage support. Perfect for counting events, tracking activities and more.
- Host: GitHub
- URL: https://github.com/atia-farha/counter-web-app
- Owner: Atia-Farha
- License: other
- Created: 2024-11-21T16:57:26.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-06-12T07:36:58.000Z (4 months ago)
- Last Synced: 2025-06-21T08:36:27.670Z (4 months ago)
- Language: HTML
- Homepage: https://counter-web-app.pages.dev/
- Size: 138 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Counter Web App
A simple and minimalistic counter web app with keyboard shortcuts and local storage support. Perfect for counting events, tracking activities and more.
## 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
counter-wabapp/ # 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
├── README.md # Project documentation
└── LICENSE # LICENSE file
```
## Technologies Used
- HTML
- CSS
- JavaScript
## Features
- **Increment, Decrement, Reset:** Intuitive button controls for managing the counter value.
- **Keyboard Shortcuts:** Control the counter using specific keys.
- **Persistent State:** Counter value is saved using Local Storage and persists across sessions.
- **Responsive Design:** Works seamlessly on different devices and screen sizes.
## Usage
1. Simply open this link.
2. Use the `+` button to increment the counter.
3. Use the `-` button to decrement the counter.
4. Use the Reset button reset the counter. (visible and work only when the counter is greater than 0)
5. The counter value will persist across browser sessions.
> Ensure that you already have an installed web browser (Chrome, Firefox, etc.) on your device.
## Keyboard Shortcuts for Buttons
- **Increase:** `Spacebar`, `ArrowUp`, or `S`
- **Decrease:** `Backspace`, `ArrowDown`, or `A`
- **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