Tutorial Playlist

JavaScript Tutorial: Learn JavaScript from Scratch


An Introduction to JavaScript: Here Is All You Need to Know

Lesson - 1

JavaScript Hello World: Here's What You Need To Know

Lesson - 2

All You Need to Know About JavaScript Arrays

Lesson - 3

Using Array Filter In JavaScript to Filter Array Elements

Lesson - 4

Everything You Need to Know About Array Reduce JavaScript

Lesson - 5

Introduction To JavaScript Loops: Do-While, For, For-In Loops

Lesson - 6

All You Need to Learn About Javascript Functions

Lesson - 7

The Best Guide on How to Implement JavaScript Closures

Lesson - 8

JavaScript “This” Keyword and How to Implement It

Lesson - 9

How to Implement JavaScript Form Validation

Lesson - 10

An Introduction Guide To JavaScript RegEx

Lesson - 11

How to Validate an Email Address in JavaScript?

Lesson - 12

All You Need to Know About JavaScript Promises

Lesson - 13

How to Implement JavaScript Async/Await

Lesson - 14

JavaScript DOM Tutorial: 2020 Edition

Lesson - 15

JavaScript Objects: Properties, Methods, and Accessors

Lesson - 16

An Introduction to Javascript Games: The Best Guide

Lesson - 17

An Easy Guide To Build A Calculator App In JavaScript

Lesson - 18

Javascript Projects: The Best Guide

Lesson - 19

What is OOP in JavaScript? How is it Implemented?

Lesson - 20

The Best Guide to Understanding JavaScript Learning Path

Lesson - 21

Java Vs .NET: Which Is the Best Technology to Choose?

Lesson - 22

Top 40 JavaScript Interview Questions You Should Know

Lesson - 23

Typeof in JavaScript: Checking Data Types Using the Typeof Operator

Lesson - 24

Tips and Tricks That You Should Know Before Going to a Coding Interview

Lesson - 25

Callback Functions in JavaScript

Lesson - 26

JavaScript Events

Lesson - 27
An Easy Guide To Build A Calculator App In JavaScript

Ever wondered how to build a calculator app in JavaScript? This is an exceptional article to learn how to build a simple calculator application using HTML/CSS and JavaScript. This is assuming that you know the basics like HTML tags and CSS styling. In this article on Calculator in JavaScript, the text editor you will use is VS Code. So, here’s a live demo of the calculator you will build after you follow the step-by-step guide. 


Now that you know what’s in store for you, let’s begin. 

Full Stack Java Developer Course

In Partnership with HIRIST and HackerEarthEXPLORE COURSE
Full Stack Java Developer Course

A Guide to Build a Simple Calculator

Here, this demo has created a folder called Calculator which holds three files, viz., index.html, calc.js, and calc.css. 

Initial HTML Code to Include the .js and .css files 

In this step, you write the head tag's initial code and include the .js and .css files. 

<!DOCTYPE html>

<html lang="en">


    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="./calc.js" type="text/javascript"></script> 

    <link rel="stylesheet" href="calc.css">



Input the Digits And Operators

This step creates buttons for digits from 0 to 9 and operators like +,-,*,/, and = 


    <h1 style="text-align:center">Calculator App</h1>

    <div class="container">




            <td colspan="3"><input type='text' id='result' class ='screen' style="text-align: right;"></td>


                <input type='button' value = 'C' onclick="clearScreen()" class="clear"/>




    <div class="keys">

    <input type="button" value="7" class="button" onClick="display('7')"></input>

    <input type="button" value="8" class="button " onClick="display('8')"></input>

    <input type="button" value="9" class="button" onClick="display('9')"></input>

    <input type="button" value="/" class="operator" onClick="display('/')"></input>

    <input type="button" value="4" class="button" onClick="display('4')"></input>

    <input type="button" value="5" class="button" onClick="display('5')"></input>

    <input type="button" value="6" class="button" onClick="display('6')"></input>

    <input type="button" value="*" class="operator" onClick="display('*')"></input>

    <input type="button" value="1" class="button" onClick="display('1')"></input>

    <input type="button" value="2" class="button" onClick="display('2')"></input>

    <input type="button" value="3" class="button" onClick="display('3')"></input>

    <input type="button" value="-" class="operator" onClick="display('-')"></input>

    <input type="button" value="0" class="button" onClick="display('0')"></input>

    <input type="button" value="." class="button" onClick="display('.')"></input>

    <input type="button" value= "=" class="button equal-sign" onClick="solve()"></input>

    <input type="button" value="+" class="operator" onClick="display('+')"></input>




Here, you have to make use of the input tag with the type button and a click event. The text box to display the digits and the output value is given the id “result”. This id is used in functions like clearScreen(), Display() and Solve(). These functions perform as their name suggests. It provides the function definition in the .js file. 

Without the styling, the output of the above code will look like this. 


Free Course: JavaScript for Beginners

Learn the Basics of JavaScriptEnroll Now
Free Course: JavaScript for Beginners

Add the Styling In the .css file

To beautify what you see on the screen, styling is crucial. Here’s the styling you could add to your application. If you prefer a fresh look, you can modify it accordingly. 

.container {

    border: 1px solid #cccccc;

    box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75);

    border-radius: 20px;

    position: absolute;

    top: 55%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 450px;

    height: 400px;


.keys {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    grid-gap: 10px;

    padding: 10px;



.button {

    height: 60px;

    padding: 5px;

    background-color: #fff;

    border-radius: 3px;

    border: 1px solid #c4c4c4;

    background-color: transparent;

    font-size: 2rem;

    color: #333;

    background-image: linear-gradient(to bottom, transparent, transparent 50%, rgba(0,0,0,.04));

    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 0 rgba(255,255,255,.45), inset 0 -1px 0 0 rgba(255,255,255,.15), 0 1px 0 0 rgba(255,255,255,.15);

    text-shadow: 0 1px rgba(255,255,255,.4);


.button:hover {

    background-color: #eaeaea;


.operator {

    color: #fff;

    background-color: #eebb24;


.clear {

    background-color: #f0595f;

    border-color: #b0353a;

    color: #fff;

    width: 80px;

    height: 30px;  


.clear:hover {

    background-color: #f17377;


.equal-sign {

    background-color: #25a8e0;

    border-color: #25a8e0;

    color: #fff;


.equal-sign:hover {

    background-color: #4e9ed4;



    background-color:rgb(171, 219, 231);

    justify-content: left;

    color: black;

    font-size: medium;

    width: 50%;

    height: 30%;

    cursor: default;

    padding: 10px; 

    padding-left: 40%;

    margin: auto;

    margin-bottom: 10px;


After adding the styling, your application will look like this. 


FREE Java Certification Training

Learn A-Z of Java like never beforeEnroll Now
FREE Java Certification Training

Handing the Input Provided by the User

All the input given by the user must be accepted and processed to provide the necessary output. As mentioned, you are performing three different actions, displaying the values, solving the expressions, and clearing the textbox. Here’s the code to be written in the calc.js file

display() function

function display(val){

    document.getElementById('result').value += val

    return val



This function accepts the values clicked as a parameter and returns the same to the textbox. The value could be a digit, a decimal point, or an operator except ‘=’. 

solve() function

function solve(){

    let x = document.getElementById('result').value

    let y = eval(x);

    document.getElementById('result').value = y

    return y



The solve() method is called when the user clicks on the ‘=’ operator. The variable x accepts the mathematical expression provided by the user. This expression is evaluated and stored in the variable y. The result is displayed in the textbox. 


This function is called when the user clicks on the C or the clear button. 

function clearScreen(){

    document.getElementById('result').value = ''


The value of the result is set to an empty string. 

You can now open your browser to view the final output. 


And VOILA!!! You have successfully created a calculator application using JavaScript. 

Get a firm foundation in Java, the most commonly used programming language in software development with the Java Certification Training Course.

Final Thoughts 

We hope you found this article on Calculator in JavaScript helpful. If you wish to learn JavaScript and make a career as a front-end developer, then gaining certification is highly recommended.

Simplilearn's JavaScript Certification Training course helps master the JavaScript programming language in an all-inclusive training program that includes complete JavaScript fundamentals, jQuery, Ajax, and more. You will also have the opportunity to apply your skills by building a real-time chat application.

If you have any queries or feedback, drop a comment in the comments section of the article. Our experts will get back to you ASAP! 

About the Author

Chinmayee DeshpandeChinmayee Deshpande

Chinmayee is a Research Analyst and a passionate writer. Being a technology enthusiast, her thorough knowledge about the subject helps her develop structured content and deliver accordingly.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.