Mukhtar's Blog
A simple counter with HTML

A simple counter with HTML

Abdulfatai Mukhtar's photo
Abdulfatai Mukhtar
·

4 min read

As improving skills is among the goals of developers, creating a simple counter is what comes to mind after learning a new programming language, we'll be creating a simple counter now with HTML, CSS and JavaScript.

We'll be making sure our counter has an element which will be holding the number that is being increased and we'll give it an id of 'number', a button to increase the number that will be counted and we'll give it an id of 'increase-number' and also a reset button and we'll give it an id of 'reset', so our HTML code should look like this, linked with the CSS and JavaScript file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Counter</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="counter">
        <p id="number">0</p>
        <div id="buttons">
            <button id="increase-number">Increase</button>
            <button id="reset">Reset</button>
        </div>
    </div>
</body>
<script src="script.js"></script>
</html>

To make the counter look beautiful, we'll be adding some stylings, then the CSS code should look like this.

body{
    background-color: azure;
}
/* the counter body */
#counter{
    text-align: center;
    padding: 2%;
    background-color: cornflowerblue;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
}
/* both buttons */
#increase-number, #reset{
    border: none;
    border-radius: 2px;
    padding: 5px;
    background-color: skyblue;
}
/* the number that increases */
#number{
    font-size: 25px;
    font-family: monospace;
}
/* hover action on both */
#increase-number:hover, #reset:hover{
    box-shadow: 2px 2px 10px black;
}

Now the counter is looking beautiful, what is left is to add actions to the buttons so it works as expected, this is the JavaScript part of the counter, firstly we want to make sure the number increases as we click on the increase button. to do this we'll be using JavaScript 'onclick' Event which will be firing when the button is clicked. to prepare all HTML elements for use in the JavaScript file we'll be using 'getElementById()' which is a Document Object Method(DOM) selection method to get all three objects we need.

let number = document.getElementById('number')//which is the number that will be increased
let increase = document.getElementById('increase-number')//the button that increases when clicked
let reset = document.getElementById('reset'); //the reset button

To handle the increase button we will be using the 'onclick' Event like I said earlier, if you remember well, zero is our HTML content in the 'p' tag, which means it will always start from zero when the 'onclick' function fires, and 'number.innerHTML' here is the zero, this will always increase by one when increase is clicked because of our increment operator '++'.

increase.onclick = () =>{
    number.innerHTML++
}

Now to handle the reset button we'll be writing another 'onclick' Event to set the HTML content of p tag to '0' back.

reset.onclick = () =>{
    number.innerHTML = 0;
}

And now our counter is fully working, Wow you've come this far, Thank you for reading.

HTML5CSSJavaScriptprojects