In this tutorial, we’ll walk through how to build a basic Counter App using just HTML, CSS, and JavaScript. It’s a great project for beginners who want to understand how these three core web technologies work together.
HTML:
The HTML code creates the skeleton of the web page. Inside the <body>, we use a div with the class container to hold all elements. The heading <h1> displays the title “Counter”. The <div id="counter"> shows the current counter value, which starts at 0. Below that, we include three buttons: Decrease, Reset, and Increase—each with a unique ID to target them with JavaScript later.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Project 1: Counter</title>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Counter</h1>
<div id="counter">0</div>
<div class="buttons">
<button id="decrease">Decrease</button>
<button id="reset">Reset</button>
<button id="increase">Increase</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
The CSS makes the interface look clean and user-friendly. We begin by resetting default margins and paddings with the universal selector *, and apply the Roboto Mono font for a modern feel. The body is styled to center the content both vertically and horizontally using Flexbox. The .container class adds padding, a white background, rounded corners, and a soft shadow. Each button is color-coded—red for decrease, yellow for reset, and green for increase—making their functions easily recognizable.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Roboto Mono", monospace;
background-color: #2eec71;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
text-align: center;
background-color: #ffffff;
padding: 40px;
border-radius: 10px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
h1 {
margin-bottom: 20px;
color: #333333;
}
#counter {
font-size: 4em;
margin: 20px 0;
color: #444444;
}
.buttons button {
padding: 10px 20px;
margin: 0 10px;
font-size: 1em;
border: none;
cursor: pointer;
transition: background 0.3s;
color: #ffffff;
}
#decrease {
background-color: #ff6b6b;
}
#increase {
background-color: #2eec71;
}
#reset {
background-color: #f1c40f;
}
.buttons button:hover {
opacity: 0.9;
}
Javascript:
JavaScript adds interactivity to the app. First, we select the counter display and the three buttons using getElementById. We then initialize a variable counter to 0. Event listeners are added to each button to handle clicks. When the Increase button is clicked, the counter increments by 1; the Decrease button reduces it by 1; and the Reset button sets it back to 0. The updateDisplay function updates the number shown in the counter <div> based on the current value of the counter variable.
const counterDisplay = document.getElementById("counter");
const increaseBtn = document.getElementById("increase");
const decreaseBtn = document.getElementById("decrease");
const resetBtn = document.getElementById("reset");
let counter = 0;
increaseBtn.addEventListener("click", () => {
counter++;
updateDisplay();
});
decreaseBtn.addEventListener("click", () => {
counter--;
updateDisplay();
});
resetBtn.addEventListener("click", () => {
counter = 0;
updateDisplay();
});
function updateDisplay() {
counterDisplay.textContent = counter;
}
This simple counter app is a great example of how HTML, CSS, and JavaScript come together to create interactive web applications. HTML gives structure, CSS adds style, and JavaScript brings it to life. If you’re just starting out with web development, projects like this are perfect for building confidence and understanding how everything connects.
