🧮 Counter App

A sleek and modern counter application built with vanilla JavaScript, HTML, and CSS. Features a beautiful dark/light theme toggle, smooth animations, and keyboard shortcuts for enhanced user experience.

✨ Features

🎯 Core Functionality

• Increment/Decrement Counter: Increase or decrease the counter value
• Custom Step Value: Set any step value for counting (default: 1)
• Reset Function: Reset counter to 0 and step value to 1
• Real-time Updates: Instant visual feedback for all operations

🌓 Theme System

• Dark/Light Theme Toggle: Seamlessly switch between themes
• Smooth Transitions: All elements animate smoothly during theme changes
• Visual Indicators: Sun and moon icons show current theme state
• Persistent Design: Consistent styling across both themes

⌨️ Keyboard Shortcuts

• Arrow Up or +: Increase counter
• Arrow Down or -: Decrease counter
• R: Reset counter and step value
• T: Toggle between light and dark themes

🎨 User Experience

• Hover Effects: Interactive button animations
• Responsive Design: Works perfectly on mobile and desktop
• Smooth Animations: 0.3s ease transitions throughout
• Modern UI: Clean, minimalist design with Inter font

🚀 Demo

Our App Live at : https://biswajithemram.github.io/counter-app/

🛠️ Technologies Used

• HTML5: Semantic markup structure
• CSS3: Modern styling with Flexbox and transitions
• Vanilla JavaScript: Pure JS for all functionality
• Google Fonts: Inter font family for typography

📁 Project Structure

Counter App/
├── index.html          # Main HTML structure
├── style.css           # Styling and theme definitions
├── script.js           # JavaScript functionality
└── README.md           # Project documentation

🎮 How to Use

Basic Operations

1. Increase Counter: Click the "Increase" button or press ↑/+
2. Decrease Counter: Click the "Decrease" button or press ↓/-
3. Set Step Value: Enter any number in the step input field
4. Reset: Click "Reset" button or press R key
5. Toggle Theme: Click the toggle switch or press T key

Keyboard Controls

Key	Action
↑ or +	Increase counter
↓ or -	Decrease counter
R	Reset counter
T	Toggle theme

🎨 Theme Features

Light Theme

• Clean white background
• Subtle gray shadows
• Green accent colors (#39e079)
• High contrast for readability

Dark Theme

• Dark gray backgrounds (#1a1a1a, #2d2d2d)
• Reduced eye strain colors
• Same green accents maintained
• Smooth color transitions

🔧 Installation & Setup

1. Clone or Download the project files
2. Open index.html in any modern web browser
3. Start using the counter app immediately!

Local Development

# Navigate to project directory
cd "Counter App"

# Open in browser (Windows)
start index.html

# Or serve with a local server
npx serve .

📱 Browser Compatibility

• ✅ Chrome (Latest)
• ✅ Firefox (Latest)
• ✅ Safari (Latest)
• ✅ Edge (Latest)
• ✅ Mobile Browsers

🎯 Code Highlights

Theme Toggle Implementation

toggleTag.addEventListener("click", () => {
  toggleBtn.classList.toggle("dark");
  document.body.classList.toggle("dark-theme");
  
  // Toggle theme icons
  svg[0].classList.toggle("disable");
  svg[1].classList.toggle("disable");
});

Smooth CSS Transitions

.theme .toggle-btn {
  transition: all 0.3s ease;
}

.dark {
  transform: translateX(32px);
}

Keyboard Event Handling

document.addEventListener("keydown", (e) => {
  if (e.key === "ArrowUp" || e.key === "+") {
    e.preventDefault();
    increaseBtn.click();
  }
  // ... more shortcuts
});

🚀 Future Enhancements

• Local Storage: Save theme preference and counter state
• Counter Limits: Set min/max values for the counter
• Sound Effects: Audio feedback for button clicks
• Animation Effects: Pulse animation for counter changes
• History: Track counter operation history
• Export Data: Save counter sessions

🤝 Contributing

Feel free to fork this project and submit pull requests for any improvements!

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

📄 License

This project is open source and available under the MIT License.

👨‍💻 Author

Frontend BootCamp Project

• Created as part of frontend development learning journey
• Demonstrates modern CSS techniques and JavaScript functionality

---

🎉 Enjoy counting with style!

Built with ❤️ using vanilla web technologies