counter-app

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.

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