counter-app
My app is basically an increment and decrement of numbers where you tap buttons
Demo
About
A beginner-friendly JavaScript project that lets you increase, decrease, and reset a number with a clean and modern interface. Built with HTML, CSS, and vanilla JavaScript, it’s perfect for learning DOM manipulation and event handling. ✨ Features 🔼 Increase / Decrease buttons to adjust the counter 🔁 Reset button to return to zero 🎨 Dynamic color changes (green for positive, red for negative) 💻 Built using pure JavaScript (no frameworks required) 📱 Responsive design that works on both desktop and mobile 🚀 How to Run Download or clone the repository Open the index.html file in your browser Click the buttons to interact with the counter 🧠 What You’ll Learn DOM selection (getElementById) Event listeners (addEventListener) Dynamic style and text updates Basic project structure and Git/GitHub usage 📜 License This project is open-source under the MIT License — feel free to use, modify, and share it.
How it's made
his project was built using only three core web technologies: HTML for the structure of the page CSS for styling and layout JavaScript for functionality and interactivity 🏗️ Step-by-Step Breakdown Created the HTML file (index.html) Added a title, a heading, and three buttons: Increase, Decrease, and Reset. Added a <div> to display the counter value. Linked the JavaScript file at the bottom of the page with: <script src="script.js"></script> Styled it using inline CSS inside the <style> tag Used Flexbox to center everything in the middle of the page. Added a soft gradient background for a clean, modern look. Styled the buttons with hover effects and rounded corners. Wrote the logic in JavaScript (script.js) Created a variable count to hold the current number. Used document.getElementById() to get the buttons and counter display. Added event listeners for button clicks: Increase → adds +1 to the count. Decrease → subtracts 1 from the count. Reset → sets the count back to 0. Updated the display text and changed its color dynamically (green if positive, red if negative, black if zero). Tested the app in a browser Opened index.html directly in Chrome. Clicked the buttons to make sure everything worked smoothly. 🧩 Tools Used 🖋️ VS Code – for writing and editing code 🌐 Google Chrome – for testing and previewing 🧠 Vanilla JavaScript – no external libraries or frameworks