In this article, am going to talk about Pure HTML, JavaScript and CSS why designing calculator.
What I used for this calculator design is a popular application that follows all systems. So, you need no application to download before you can get started with this tutorial.
Calculator in a nutshell consists of advance algorithms that help humans in solving mathematical or scientific problems on the go. But in this one, we are going to design just simple arithmetic calculator.
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 if(conditions){ expression;}els e if(conditions){ expression;} 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. See the calculator screenshot as attachment
Copy this HTML but I will recommend you type in order for you to understand the flow
The HTML design
Place this script between the <head></head> of the HTML design
We need this style sheet to beautify the calculator. So place this styles between the <head></head> of the HTML design
What I used for this calculator design is a popular application that follows all systems. So, you need no application to download before you can get started with this tutorial.
Calculator in a nutshell consists of advance algorithms that help humans in solving mathematical or scientific problems on the go. But in this one, we are going to design just simple arithmetic calculator.
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 if(conditions){ expression;}els e if(conditions){ expression;} 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. See the calculator screenshot as attachment
Copy this HTML but I will recommend you type in order for you to understand the flow
The HTML design
Code:
<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>
Code:
<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>
Code:
<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>
Comment