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
• Technologies Used
• Features
• Usage
• Keyboard Shortcuts For Buttons
• Reporting Issues

Project Structure

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