counter-app

Problem Statement

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 RunDownload or clone the repositoryOpen the index.html file in your browserClick the buttons to interact with the counter🧠 What You’ll LearnDOM selection (getElementById)Event listeners (addEventListener)Dynamic style and text updatesBasic project structure and Git/GitHub usage📜 LicenseThis project is open-source under the MIT License — feel free to use, modify, and share it.

Solution

his project was built using only three core web technologies:HTML for the structure of the pageCSS for styling and layoutJavaScript for functionality and interactivity🏗️ Step-by-Step BreakdownCreated 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> tagUsed 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 browserOpened 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