Hello, today you and I are going to develop a simple calculator using JavaScript. Nevertheless, we shall be using Cascading Style Sheet (CSS) to beautify the design.
Though this calculator can be developed using advance JavaScript, I have made it simple as I can for you and I to understand how the program will work without having to stress our brains.
The program is been divided into two functions which are and the . As the names implies; the function is used to input value into the calculator display screen while the function otherwise called the power room is used to carry out the calculation process and algorithm.
Some variables like preval, result and sign e.t.c where declared globally so that they can be accessed anywhere in the program.
Just as I said earlier, I tried as much as possible to make the code easy that is why I used the common control statement known as statement.
By the end of this tutorial, you will be able to understand some basics of JavaScript and above all you will see how simple it is to use JavaScript well developing any web app.
Our next JavaScript script tutorial will be Connecting to Database using pure JavaScript. So stay tuned!
To start the process, you have to open your notepad by;
1. Click on start or windows button from the task bar
2. Click on All Programs or Program
3. Click on Accessories Folder
4. Locate notepad icon and click
Yep, you are good to go
The HTML design
<html>
<head>
<title>JavaScript Calculator</title>
</head>
<body>
<div class="calc">
<table>
<tr>
<td colspan="4">
<div class="txt" id="divinput">0</div>
</td>
</tr>
<tr>
<td>
<input type="button" class="btn" id="btn8" value="8" onclick="input(8);"/>
</td>
<td>
<input type="button" class="btn" id="btn9" value="9" onclick="input(9);"/>
</td>
<td>
<input type="button" class="btn" id="btn7" value="7" onclick="input(7 );"/>
</td>
<td>
<input type="button" class="btnopt" id="btnclr" value="Clr" onclick="calc('clr');" />
</td>
</tr>
<tr>
<td>
<input type="button" class="btn" id="btn4" value="4" onclick="input(4);"/>
</td>
<td>
<input type="button" class="btn" id="btn5" value="5" onclick="input(5);"/>
</td>
<td>
<input type="button" class="btn" id="btn6" value="6" onclick="input(6);"/>
</td>
<td>
<input type="button" class="btnopt" id="btndivide" value="/" onclick="calc('/');"/>
</td>
</tr>
<tr>
<td>
<input type="button" class="btn" id="btn1" value="1" onclick="input(1);"/>
</td>
<td>
<input type="button" class="btn" id="btn2" value="2" onclick="input(2);"/>
</td>
<td>
<input type="button" class="btn" id="btn3" value="3" onclick="input(3);"/>
</td>
<td>
<input type="button" class="btnopt" id="btnmultiply" value="*" onclick="calc('*');"/>
</td>
</tr>
<tr>
<td>
<input type="button" class="btn" id="btndot" value="." onclick="input('.');"/>
</td>
<td>
<input type="button" class="btn" id="btn0" value="0" onclick="input(0);"/>
</td>
<td>
<input type="button" class="btn" id="btnminus" value="-" onclick="calc('-');"/>
</td>
<td>
<input type="button" class="btnopt" id="btnplus" value="+" onclick="calc('+');"/>
</td>
</tr>
<tr>
<td colspan="4">
<input type="button" class="btnopt" style="width:100%;" id="btnequal" value="=" onclick="calc('=');"/>
</td>
</tr>
</table>
</div>
</body>
</html>
Place this script between the <head></head> of the HTML design
<script>
var dinput=0;
var preval; //to store divinput value before clearing
var sign=""; //to know if chosen operator is +,*,- or /
var result=""; // final result
var rawinput=0;
function input(val)// this is used to input value into the calculator display screen
{
var divinput=document.getElementById("divinput");//calculator display screen
rawinput=rawinput + val;
if(dinput !=0)
{
//checking to see if divinput value is zero
//if it is not, then goto else
dinput="" + dinput + val;
divinput.innerHTML="" + divinput.innerHTML+ val;
}
else
{
divinput.innerHTML= "" + val;
dinput = "" + val;
}
//for showing previous input and current input
if(sign != ""){
rawinput=rawinput;
divinput.innerHTML=rawinput + "<br/>" + dinput;
}
else{
rawinput=rawinput + val;
}
}
//this function is the main calculator power room
function calc(opt)
{
var newval; //to collect new inputted value
var divinput=document.getElementById("divinput");
if(opt=="clr")
{//for resetting the calculator
divinput.innerHTML="0";
dinput=0;
rawinput=0;
result="";
preval="";
sign="";
opt="";
}
else if (opt !="clr" && opt != "=")
{ //for inputs manipulation
preval=dinput;
divinput.innerHTML="";
dinput="";
sign=opt;
rawinput="" + preval + opt;
divinput.innerHTML=rawinput + "<br/>" + "";
}
else if(opt== "=")
{//for displaying result
newval=dinput;
if(sign=="+")
{
result=parseFloat(preval) + parseFloat(newval);
}
else if(sign=="-")
{
result=parseFloat(preval) - parseFloat(newval);
}
else if(sign=="/")
{
result=parseFloat(preval) / parseFloat(newval);
}
else if(sign=="*")
{
result=parseFloat(preval) * parseFloat(newval);
}
dinput=result;
divinput.innerHTML="<span class='values'>" + rawinput + "=</span>" + "<br/><br/>" + "<span class='result'>" + result + "</span>";
}
}
</script>
We need this style sheet to beautify the calculator. So place this styles between the <head></head> of the HTML design
<style>
.values
{
color: blue;
font-size:30pt;
}
.result{
color: purple;
font-size:50pt;
float: right;
}
.btn{
background-color:crimson;
color:white;
font-family:Calibri;
font-size:40pt;
font-weight:bold;
width:215px;
height:215px;
border-style: solid;
border-width:2px;
border-color: yellow;
}
.btnopt{
background-color:brown;
color:white;
font-family:Calibri;
font-size:45pt;
font-weight:bold;
width:25px;
height:25px;
border-style: solid;
border-width:2px;
border-color: yellow;
}
.txt
{
width:100%;
height:400px;
border-style: solid;
border-width:3px;
border-color:gray;
background-color:white;
color:red;
font-family:Calibri;
font-size:125pt;
font-weight:bold;
white-space:pre-line;
word-break: break-all;
word-wrap: break-word;
}
table{
width:100%;
}
td
{
width:100px;
}
.calc{
width:100%;
height:auto;
border-style: solid;
border-width:2px;
border-color:gray;
margin:0 auto; /* center the calc div*/
}
</style>
<html>
<head>
<title>JavaScript Calculator</title>
<script>
var dinput=0;
var preval; //to store divinput value before clearing
var sign=""; //to know if chosen operator is +,*,- or /
var result=""; // final result
var rawinput=0;
function input(val)// this is used to input value into the calculator display screen
{
var divinput=document.getElementById("divinput");//calculator display screen
rawinput=rawinput + val;
if(dinput !=0)
{
//checking to see if divinput value is zero
//if it is not, then goto else
dinput="" + dinput + val;
divinput.innerHTML="" + divinput.innerHTML+ val;
}
else
{
divinput.innerHTML= "" + val;
dinput = "" + val;
}
//for showing previous input and current input
if(sign != ""){
rawinput=rawinput;
divinput.innerHTML=rawinput + "<br/>" + dinput;
}
else{
rawinput=rawinput + val;
}
}
//this function is the main calculator power room
function calc(opt)
{
var newval; //to collect new inputted value
var divinput=document.getElementById("divinput");
if(opt=="clr")
{//for resetting the calculator
divinput.innerHTML="0";
dinput=0;
rawinput=0;
result="";
preval="";
sign="";
opt="";
}
else if (opt !="clr" && opt != "=")
{ //for inputs manipulation
preval=dinput;
divinput.innerHTML="";
dinput="";
sign=opt;
rawinput="" + preval + opt;
divinput.innerHTML=rawinput + "<br/>" + "";
}
else if(opt== "=")
{//for displaying result
newval=dinput;
if(sign=="+")
{
result=parseFloat(preval) + parseFloat(newval);
}
else if(sign=="-")
{
result=parseFloat(preval) - parseFloat(newval);
}
else if(sign=="/")
{
result=parseFloat(preval) / parseFloat(newval);
}
else if(sign=="*")
{
result=parseFloat(preval) * parseFloat(newval);
}
dinput=result;
divinput.innerHTML="<span class='values'>" + rawinput + "=</span>" + "<br/><br/>" + "<span class='result'>" + result + "</span>";
}
}
</script>
<style>
.values
{
color: blue;
font-size:30pt;
}
.result{
color: purple;
font-size:50pt;
float: right;
}
.btn-tut{
background-color:crimson;
color:white;
font-family:Calibri;
font-size:20pt;
font-weight:bold;
width:100px;
height: 100px;
border-style: solid;
border-width:2px;
border-color: yellow;
}
.btnopt{
background-color:brown;
color:white;
font-family:Calibri;
font-size:25pt;
font-weight:bold;
width:100px;
height:100px;
border-style: solid;
border-width:2px;
border-color: yellow;
}
.txt
{
width:100%;
height:200px;
border-style: solid;
border-width:3px;
border-color:gray;
background-color:white;
color:red;
font-family:Calibri;
font-size:55pt;
font-weight:bold;
white-space:pre-line;
word-break: break-all;
word-wrap: break-word;
}
table{
width:100%;
}
td
{
width: 100%;
}
.calc{
width:50%;
height:auto;
border-style: solid;
border-width:2px;
border-color:gray;
margin:0 auto; /* center the calc div*/
}
</style>
</head>
<body>
<div class="calc">
<table>
<tr>
<td colspan="4">
<div class="txt" id="divinput">0</div>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<input type="button" class="btnopt" id="btnclr" value="Clr" onclick="calc('clr');" />
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<input type="button" class="btnopt" id="btndivide" value="/" onclick="calc('/');"/>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<input type="button" class="btnopt" id="btnmultiply" value="*" onclick="calc('*');"/>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<input type="button" class="btnopt" id="btnplus" value="+" onclick="calc('+');"/>
</td>
</tr>
<tr>
<td colspan="4">
<input type="button" class="btnopt" style="width:100%;" id="btnequal" value="=" onclick="calc('=');"/>
</td>
</tr>
</table>
</div>
</body>
</html>