Master JavaScript Basics with a Real-World Project: Create a Bank Queue System Web App

We are going to review JavaScript basics with a web app for a bank queue system. By the end of this blog, those who don’t know JavaScript or knew it but forgot will get a review of JavaScript functions, mathematical operations, and how to get an element and change its text.

At first, we set up an HTML and CSS file. The HTML file includes a heading about the web app and the value of the current people in the queue. We also gave this element an ID so we can work with it later.

<html>

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>People On Queue:</h1>
    <h2 id="value">0</h2>
    <button onclick="counter()" id="token">Get A Token</button>
    <script src="index.js"></script>
</body>

</html>

JavaScript is a way to interact with our website. We created a JavaScript file named index.js. To make it work with our HTML/CSS website, we need to connect it using the <script> tag, where we set the src="" attribute to the JS file source.

Now, let’s think about a bank: when we enter, there’s often a token machine where we click a button, and it gives us a token, showing either our number or the number of people ahead of us in line. For our system, we need a button that, when clicked, displays a number to show our position.

Whenever we want to make a counter that will increase, we must set an initial value to start with. For our case, it should be 0, as there should initially be zero people in the line. When the first person arrives, we add 1 to 0, making 1, and store this value in a variable. When another person arrives, we add 1 to the previous stored value, giving an incremented value each time. If we think about it, this means we need some action to happen when the button is clicked, so we will need a function.

To write a function, we first write the function keyword, give it a name, add (), followed by {}. Inside the {}, we write what the function will do.

So, first, we set people = 0, as mentioned before, and save it inside a variable. We also give an ID to the number displayed on the screen so we can modify or style it. In JavaScript, we get this element by writing document.getElementById("idName"), which will find the element with that ID in the HTML document and save it in the newValue variable.

let people = 0;
let newValue = document.getElementById("value");


function counter() {
    people = people + 1;
    newValue.innerText = people;
}

Inside the function, we create a counter using people = people + 1;, which means the previous value of people (initially 0) is increased by 1.

There is another property called innerText, which is self-explanatory. Here, we need to set the inner text of the display number, and we set the new inner text to the incremented people count.

Now the function is created, but it will not do anything unless we call it. We can call it using the function name, like name(), and the function will execute. For our case, we want it to execute only when the button is clicked, so we add an onClick="" attribute to the button and write the function name inside the quotes. Now, every time we click the button, the function is called, and the number on the display increases by 1.

Leave a Comment Cancel reply