Creating a Simple Counter in JavaScript Tutorial

Fettys · 2025-02-27T03:12:59+0000

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 :)

Download

You must upgrade your account or reply in the thread to view the hidden content.

Creating a Simple Counter in JavaScript Tutorial

More options

Fettys

452,292

324,135

324,143