In this tutorial, we’ll learn how to create a simple counter using HTML, CSS, and JavaScript. This counter will allow users to increase or decrease a number displayed on the screen by clicking buttons.
Step 1: Create the HTML structure
First, let’s create the basic HTML structure for our counter. We’ll have a container div to hold the counter value and two buttons to increase and decrease the value.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="counter">
<button onclick="decrease()">-</button>
<span id="count">0</span>
<button onclick="increase()">+</button>
</div>
<script src="script.js"></script>
</body>
</html>Step 2: Style the counter with CSS
Next, let’s style our counter using CSS. Create a styles.css file and add the following styles:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.counter {
display: flex;
align-items: center;
}
button {
padding: 10px 20px;
font-size: 1.2rem;
background-color: dodgerblue;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
span {
margin: 0 20px;
font-size: 2rem;
}Step 3: Add functionality with JavaScript
Finally, let’s add the functionality to our counter using JavaScript. Create a script.js file and add the following code:
let count = 0;
const countElement = document.getElementById('count');
function increase() {
count++;
countElement.innerText = count;
}
function decrease() {
count--;
countElement.innerText = count;
}Now, when you open your HTML file in a browser, you should see a counter displayed on the screen with two buttons to increase and decrease the value. Clicking on the buttons should update the counter accordingly.
Feel free to customize the styles and functionality further to suit your needs. Happy coding!
