Create Simple Calculator using Javascript CSS & HTML

As a beginner developer building a Web calculator is a good project. If you have a knowledge on Javascript you can easily create a Calculator with Javascript. In this post we will cover UI interaction and Javascript functionality to handle mathematical operations.

This Example we will cover

HTML UI
CSS
Javascript Math Operations

Prerequisites

To create this simple Javascript Calculator yo should know

Basic HTML and Javascript
A Text Editor (Notepad, Notepad++...)

Let's design the Calculator

As a developer to do calculator we should be clear about math operations like, addition, substration, multiplication, division, and how to handle decimalvalues in javascript.

Let create 3 folders to separate html,css and javascript files, this way we can manage our files easily.

Let's create a html file under html folder and add basic code like below

    <!doctype html>
<html lang="pt-br">
<head>
       <title>Simple Calculator Example</title>
      <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fite=no">
       <link rel="stylesheet" href="bootstrap.min.css">


   </head>
<body>
<div class="container">
       <div class="row">
           <div class="col d-flex justify-content-center">
               <br />

               </div>
           </div>
       </div>
   </div>
</body>
<html>

Now the above code will give below output with math symbols and number and one text editor to display result.

Add Style to design the Calculator UI

Now create a css file under css folder and add below code

body {
background-color: #51787A;
}
.calculadora {
    margin-top: 100px;
    border: solid 1px #000;
    padding: 20px;
    background:linear-gradient(#3a1c71, #D76D77);
    border-radius: 1rem;
    box-shadow: 2px 3px 2px #000;
}

.btn {
    width: 60px;
    height: 50px;
    margin: 5px;
    box-shadow: 1px 1px 1px #000;
}

.clear {
width: 130px;
}

.enter {
height: 110px;
}

.zero {
width: 130px;
}

.result {
    text-align: right;
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 20px;
    border: solid 1px #000;
    box-shadow: 1px 1px 1px #000;
}

Add external css to html file

To add external css files into html page we will use <link/> atrribute. Now lets add these external css files to our html page

Under head tag add below code

Now our UI will be looks like below

Add Javascript functionality to work Math operations on Calculator

Now create a javascript file inside js folder and add below code

This function takes two parameters type and value.

type: will check the type of math operator. Based on this operator we will add our math logic like addition, subtraction...

value: this is the value which number we click on the calculator ui

Add this external Javascript file to html

To add external Javascript files to html page we will use script tag and set the js file path to src attribute

Add this javascript function to respected buttons.

We will update each button with add this javascript function under button onclick event

onclick="calcular('value', 1)"

After adding the onlick event of the button all button codes will be like below

</div>

Now lets open the html file on your browser and you can do math operations with your own calculator which is created with Javascript.

Complete HTML file will look like below

   <!doctype html>
<html lang="pt-br">
<head>
       <title>Simple Calculator Example</title>
      <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fite=no">
       <link rel="stylesheet" href="../css/bootstrap.min.css">
       <link rel="stylesheet" href="../css/css.css">


</head>
<body>
<div class="container">
       <div class="row">
           <div class="col d-flex justify-content-center">
               <br />

               </div>
           </div>
       </div>
   </div>
</body>
<script type="text/javascript" src="../js/operations.js"></script>

</html>

Subscribe For Daily Updates

More Projects