Building a simple calculator using JavaScript

javaScript Project Calculator

Calculator help you to solve a arithmetic operations. And Today you are going to learn about building a simple calculator using a JavaScript.

index.html file :

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <div class="container">
        <div class="calculator">
            <input type="text" name="display" id="display">
<script src="calc.js"></script>

For the styling part , create a style.css file with the following code :

    text-align: center;
    margin-top: 30px;

    margin: auto;

    border-radius: 21px;
    border: 5px solid coral;
    font-size: 34px;
    height: 65px;
    width: 456px;

    border-radius: 10px;
    font-size: 40px;
    width: 102px;
    height: 90px;
    margin: 6px;
    background-color: coral;

    border: 8px solid crimson;
    background-color: greenyellow;
    padding: 23px;
    border-radius: 10px;
    display: inline-block;

After styling your css, you will see like the below diagram:

Building a simple calculator using JavaScript
Building a simple calculator using JavaScript

Now the main part for the functionality is done using the JavaScript language.

let display = document.getElementById('display');
buttons = document.querySelectorAll('button');
let displayValue = '';
for(item of buttons){
        buttonText =;
        console.log('Button text is ',buttonText);
        if(buttonText== 'X'){
            buttonText = '*';
            displayValue += buttonText;
            displayValue = displayValue;
        else if(buttonText =='AC'){
            displayValue = "";
            display.value = displayValue;
        else if(buttonText =='='){
            display.value = eval(displayValue);

            displayValue += buttonText;
            display.value = displayValue

Download the code from GitHub and full tutorial is uploaded on YouTube

If you have any query related to this article please do comment below :