https://github.com/atia-farha/vue-counter-app
Vue version of 'counter-app' Repository.
https://github.com/atia-farha/vue-counter-app
counter-app css3 html5 keyboard-shortcuts localstorage popup-message vue3 vuejs
Last synced: 6 days ago
JSON representation
Vue version of 'counter-app' Repository.
- Host: GitHub
- URL: https://github.com/atia-farha/vue-counter-app
- Owner: Atia-Farha
- License: other
- Created: 2024-11-24T13:47:07.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-02-24T20:03:25.000Z (8 months ago)
- Last Synced: 2025-03-29T16:41:33.898Z (6 months ago)
- Topics: counter-app, css3, html5, keyboard-shortcuts, localstorage, popup-message, vue3, vuejs
- Language: HTML
- Homepage: https://atia-farha.github.io/vue-counter-app/
- Size: 27.3 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Counter Web App with Vue.js
A simple and minimalistic counter web app with keyboard shortcuts and local storage support made with Vue.js. Perfect for counting events, tracking activities and more.
This is just the Vue version of counter-app Repository.
## 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
vue-counter-app/ # 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
│ └── app.js # js file for Vue
├── README.md # Project documentation
└── LICENSE # License file
```
## Technologies Used
- HTML
- CSS
- Vue.js
## Features
- **Increment, Decrement, Reset:** Intuitive button controls for managing the counter value.
- **Animations:** Smooth animations for pop-up notifications.
- **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