Home >>Javascript Programs >How to build a calculator using JavaScript

# How to build a calculator using JavaScript

## How to build a calculator using JavaScript

Calculator is known to be one of the basic projects that should be known to a beginner of JavaScript or any other language that simply means that they should known the procedure to create it. This is the most basic project as it only entails arithmetic operations. The programmers just need to create a button for each number and the arithmetic operations. Add symbols and then add a screen that generally serves as a screen or LCD.

### Method

Each of the buttons that is created has their own event handlers and functions in the code. The basic function does the work that whenever a number button is clicked then it prints the number that is indicated on the button into the textbox that is basically the screen. Then whenever an arithmetic operation is being clicked after a value that has been entered then it stores the value in the textbox to be the first-number and reset the value in the textbox to zero. After entering the second number the user will be calculating together with the first number and clicking the equals-to button, the equals to button will generally used to store the value in the textbox as the second number and then it will check the arithmetic you clicked. Once it has checked the arithmetic operation that the user will click, it will add or subtracts or multiply or divide the first-number and the second-number that will be depending on the arithmetic operation the user have clicked and then print the result back to the textbox that has been displayed.

### Building the calculator

First of all we want to build the calculator. The calculator generally consists of two parts that is the display and the keys.

Here we are building a Simple calculator using JavaScript code. The JavaScript calculator Function is used in order to create the Calculator.

Please follow the below code that is building a simple calculator using JavaScript:

```<!Doctype html>
<html>
<title>Javascript Calculator</title>
<!-- CSS Code -->
<style>
body {
background-color:#fff;
margin: 0px auto;

}
.calbody{
background: #097C9B;
border: 1px solid #ff0;
margin-left: 450px;
min-width: 27.4em;
max-width: 27.4em;

}
h1{
text-align: center;
font-size: 40px;
color: #003652;

}

#lcd{
text-align: right;
width: 23em;
height: 40px;
font-size: 18px;

}

#lcdu{
color: grey;
text-align: right;
width: 27.6em;
height: 35px;
font-size: 15px;

}

button{
background-color: #fff;
width: 80px;
height: 60px;
font-size: 20px;
border: 1px solid #097C9B;

}

button:hover{
background-color: #509CA9;

}

</style>
<body>
<h1>
Javascript Calculator</h1>
<div class="calbody">
<form name="lcdform">
<input id="lcdu" name="lcdsu" type="text" value="" />
<input id="lcd" name="lcds" type="text" value="0" />
</form>
<div id="calbutton">
<button id="num1" onclick="numone();">1</button>
<button id="num2" onclick="numtwo();">2</button>
<button id="num3" onclick="numthree();">3</button>
<button id="operationplus" onclick="operationplus();">+</button>
<button id="operationraistop" onclick="operationraistop();">^</button>

<button id="num4" onclick="numfour();">4</button>
<button id="num5" onclick="numfive();">5</button>
<button id="num6" onclick="numsix();">6</button>
<button id="operationmult" onclick="operationmult();">*</button>
<button id="operationsqrt" onclick="sqrots();">Sqrt()</button>

<button id="num7" onclick="numseven();">7</button>
<button id="num8" onclick="numeight();">8</button>
<button id="num9" onclick="numnine();">9</button>
<button id="operationminus" onclick="operationminus();">-</button>
<button id="clr" onclick="clr();">C</button>

<button id="operationperc" onclick="operationperc();">%</button>
<button id="num0" onclick="numzero();">0</button>
<button id="num00" onclick="numdobuzero();">00</button>
<button id="operationdivid" onclick="operationdivid();">/</button>
<button id="sumbit" onclick="equalsto();">=</button>
</div>
</div>
<!-- Javascript code -->
<script>

var firstnumber;
var secondnumber;
var result;
var operations;

function numone(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){

document.lcdform.lcds.value = "1";

}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "1";
}

}
function numtwo(){

if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){

document.lcdform.lcds.value = "2";

}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "2";
}

}
function numthree(){

if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){

document.lcdform.lcds.value = "3";

}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "3";
}

}
function numfour(){

if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){

document.lcdform.lcds.value = "4";

}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "4";
}

}
function numfive(){

if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){

document.lcdform.lcds.value = "5";

}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "5";
}

}
function numsix(){

if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){

document.lcdform.lcds.value = "6";

}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "6";
}

}
function numseven(){

if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){

document.lcdform.lcds.value = "7";

}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "7";
}
}
function numeight(){

if (document.lcdform.lcds.value == "0"){

document.lcdform.lcds.value = "8";

}
else if (document.lcdform.lcds.value == result)
{
document.lcdform.lcds.value = "8";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "8";
}

}
function numnine(){

if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){

document.lcdform.lcds.value = "9";

}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "9";
}

}
function numzero(){

if (document.lcdform.lcds.value == "0"){

document.lcdform.lcds.value = "0";

}
else if (document.lcdform.lcds.value == result)
{
document.lcdform.lcds.value = "0";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "0";
}

}
function numdobuzero(){

if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){

return;

}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "00";
}

}
function clr(){
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = "";
return;
}

function operationplus(){

operation = "+";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;

}
function operationmult(){

operation = "*";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;

}
function operationminus(){

operation = "-";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;

}
function operationdivid(){

operation = "/";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;

}
function operationperc(){

operation = "%";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;

}
function equalsto(){

secondnumber = parseInt(document.lcdform.lcds.value);

if (operation == "+")
{
result = firstnumber + secondnumber;
}
else if (operation == "*"){

result = firstnumber * secondnumber;

}
else if (operation == "-"){

result = firstnumber - secondnumber;

}
else if (operation == "/"){

result = firstnumber / secondnumber;

}
else if (operation == "%"){

if (document.lcdform.lcds.value == "0"){

result = firstnumber / 100;
document.lcdform.lcdsu.value = firstnumber + operation + "100";
}
else if (document.lcdform.lcds.value != "0")  {
result = firstnumber / secondnumber * 100;
document.lcdform.lcdsu.value = firstnumber + operation + secondnumber + "*100 = " + result;
}
}
else if (operation == "^"){

for (var i = 0; i < secondnumber; i++){

result = firstnumber * i;
}

}
document.lcdform.lcds.value ="";
document.lcdform.lcds.value = result.toString();
document.lcdform.lcdsu.value = firstnumber + operation + secondnumber + " = " + result.toString();
return;

}

function sqrots(){
firstnumber = document.lcdform.lcds.value;
result = Math.sqrt(parseInt(document.lcdform.lcds.value));
document.lcdform.lcds.value = result;
document.lcdform.lcdsu.value = "sqrt(" + firstnumber + ") = " + result;

}

function operationraistop(){

operation = "^";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";

}

</script>
</body>
</html>
```
Output :