Creating a Simple Counter in JavaScript Tutorial

Submitted by oretnom23 on Friday, February 18, 2022 - 11:42.

In this tutorial, I will share with you a simple web app written in HTML, CSS, and JavaScript. This tutorial objective is to give new programmers, especially the students a very simple idea of how do simple applications are being made using JavaScript. Here, students can learn about JavaScript's click event listener, page onLoad, and updating textContent. I will be providing a source code of Simple Counter App.

The Simple Counter App allows users to update the displayed count number. The main goal of the application is to have a display content of the current count and buttons for triggering the number count to add or deduct.

Creating the Application Interface

The script below is an HTML code that contains all the elements for the user interface. Open a text-editor such as notepad++, sublime, or vscode. Next, copy the script below and paste it into a new html file. Then, save the file as index.html.

<!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>Simple Counter App</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<style></style>
 
<body>
    <main>
        <h1 id="app-title">Simple Counter App in JavaScript</h1>
        <div id="counter-field">
            <button type="button" id="left-button">-</button>
            <div id="counter-container">0</div>
            <button type="button" id="right-button">+</button>
        </div>
    </main>
</body>
 
</html>

Creating the StyleSheet

The script below is a CSS (Cascading Style Sheets) which containes the codes for the design of the elements such as the background colors and font sizes. Add new file in your text editor and paste the code below. Save the file as style.css. This is file is being loaded in the index file as you can see it at the line 9 of index.html file.

html,
body {
    height: 100%;
    width: 100%;
    padding: 0!important;
    margin: unset;
}
 
main {
    margin: unset !important;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: antiquewhite;
}
 
#app-title {
    margin: 5rem 3rem;
    text-align: center;
    font-family: cursive;
    font-size: 5rem;
}
 
#counter-field {
    min-height: 20vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
 
#left-button,
#right-button {
    background-color: aquamarine;
    height: 250px;
    width: 250px;
    border-radius: 20px 20px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bolder;
    font-size: 10rem;
    font-family: cursive;
    text-align: center;
    box-shadow: 1px 6px 21px #783333;
    transition: all ease-in .1s;
    cursor: pointer;
}
 
#counter-container {
    background-color: #efc200;
    border-radius: 20px 20px;
    height: 250px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 50px;
    font-size: 10vw;
    overflow-wrap: anywhere;
    text-align: center;
    box-shadow: 1px 6px 21px #783333;
}
 
#left-button:active,
#right-button:active {
    transform: scale(.9)
}

Creating the JavaScript

The following script is the main script of the application. It contains the scripts that add and deduct button function. Using the click event listener, it allows to trigger the script when the button are being clicked. Save the js file as script.js. This file is being loaded also in the index file at the line 10.

window.counter = function(operator = "plus") {
    var currentCount = document.getElementById('counter-container').textContent
    currentCount = parseInt(currentCount.replace(/,/gi, ""));
    if (operator == "plus") {
        currentCount += 1;
    } else if (operator == 'minus') {
        currentCount -= 1;
    } else {
        alert("undfined opereater.")
        return false;
    }
    document.getElementById('counter-container').textContent = parseInt(currentCount).toLocaleString('en-US')
 
}
 
window.onload = function() {
 
    // Add ("+") button eventListener
    document.getElementById('right-button').addEventListener('click', function() {
        counter();
    })
 
    // Minus ("-") button eventListener
    document.getElementById('left-button').addEventListener('click', function() {
        counter("minus");
    })
}

That's it. You can now test the application on your end. Browse the application into your preferred browser such as Chrome Browser. If you have encountered any error occurs, you can download the working source code I provided in this article. The download button is located below. Then, review your codes and differentiate them from the code I provided. If it still won't work, feel free to leave your queries in the comment section of this article.

DEMO VIDEO

That's the end of this tutorial. I hope this tutorial will help you to understand or give you an idea of how to create an application using HTML, CSS, and JavaScript. Explore more on this website for more Tutorials and Free Source Codes.

Enjoy :)

Add new comment

1288 views