Make A Calculator In JavaScript

Making a calculator in JavaScript is not have been taught so far. As it supports mathematical calculations. Now, we will make a simple calculator using HTML5, CSS and JavaScript.

For making it,  as always we need a markup. We will make a div element and inside that, a display and buttons. Our structure will be as below.

The HTML

<div class='calc'>
<div id='disp'>
</div>
<button id='1'>1</button>
<button id='2'>2</button>
<button id='3'>3</button>
<button id='add'>+</button>
<button id='4'>4</button>
<button id='5'>5</button>
<button id='6'>6</button>
<button id='subtr'>-</button>
<button id='7'>7</button>
<button id='8'>8</button>
<button id='9'>9</button>
<button id='mult'>x</button>
<button id='clear'>CE</button>
<button id='0'>0</button>
<button id='dec'>.</button>
<button id='division'>/</button>
<button id='ans'>=</button>
</div>

Okay, so we have made the main division 'calc' and then added another <div> for display and then added buttons for all the numbers and functions.

CSS for calculator

.calc{
  position:absolute;
  background-color:red;
  width:300px;
  height:350px;
}
#disp{
  display:block;
  height:52px;
  background-color:blue;
  margin:8px;
}
.calc button{
  height:45px;
  width:50px;
  background-color:yellow;
  margin:5px 5px 5px 15px;
}
#ans{
  width:270px;
}

And for display, we are going to add the properties.You can add that 7 segment led display font too, will look realistic!

#disp{
  font-size:45px;
  text-align:right;
  overflow:auto;
}

And here comes our main function- JavaScript.

var disp = document.getElementById("disp");
function ud(n){ 
disp.innerHTML += n ;
}
function ans(){
c=eval(disp.innerHTML);
disp.innerHTML=c;
}
function clc(){
disp.innerHTML='';
}

document.getElementById("1").addEventListener("click",function(){ ud(1); });
document.getElementById("2").addEventListener("click",function(){ ud(2); });
document.getElementById("3").addEventListener("click",function(){ ud(3); });
document.getElementById("4").addEventListener("click",function(){ ud(4); });
document.getElementById("5").addEventListener("click",function(){ ud(5); });
document.getElementById("6").addEventListener("click",function(){ ud(6); });
document.getElementById("7").addEventListener("click",function(){ ud(7); });
document.getElementById("8").addEventListener("click",function(){ ud(8); });
document.getElementById("9").addEventListener("click",function(){ ud(9); });
document.getElementById("0").addEventListener("click",function(){ ud(0); });
document.getElementById("dec").addEventListener("click",function(){ ud('.'); });

document.getElementById("add").addEventListener("click",function(){ ud('+'); });
document.getElementById("subtr").addEventListener("click",function(){ ud('-'); });
document.getElementById("mult").addEventListener("click",function(){ ud('*'); });
document.getElementById("division").addEventListener("click",function(){ ud('/'); });

document.getElementById("clear").addEventListener("click",function(){clc(); });
document.getElementById("ans").addEventListener("click",function(){ ans(); });

First we add all the buttons event listener click.Than we add function ud() to update user display and ans() to eval the mathematical expression and to show the answer.
Function clc() is to clear the display.

Live Demo

Below you can see the live demo of the calculator.You can try using it.Although this was very simple calculator.Before leaving, do remaimber to follow and like our Facebook page.

.

• Tweet
• Share
• Share
• Share
• Share