Internet Programming | Simple Scientific calculator using HTML, JavaScript and css

Posted by   on   with  No comments

Simple Scientific calculator using HTML, JavaScript and css



Hello guys, today i am going to walk you through step by step in creating your own simple scientific calculator which can perform the major calculations which most of the calculators do. Take a look at the awesome calculator below that you will create using html, javascript and css. That’s right. All you need to know is just the basics and with the few neat lines of code you can create your own working scientific calculator! So lets get started.




Step-1: Creating the HTML file     Don’t be startled by the size of the code. Here, we are just creating a bunch of buttons and getting its values when they are clicked.
<body>
<div id=”big_wrapper”>
<h1 id=”heading”>SIMPLE SCIENTIFIC CALCULATOR </h1>
<div id=”form_wrapper”>
<form id=”formone” name=”calc”>
<input id=”display” type=”text” name=”display” value=” ” disabled contenteditable=”false” >
<br>
<input class=”button number” type=”button” value=”1” onClick=”calc.display.value+=1”>
<input class=”button number” type=”button” value=”2” onClick=”calc.display.value+=2”>
<input class=”button number” type=”button” value=”3” onClick=”calc.display.value+=3”>
<input class=”button three” type=”button” value=”C” onClick=”Resetfunction(this.form)”>
<input class=”button three” type=”button” value=”<-” onClick=”backspace(this.form)”>
<input class=”button three” type=”button” value=”=” onClick=”evaluation(this.form)”>
<br>
<input class=”button number” type=”button” value=”4” onClick=”calc.display.value+=4”>
<input class=”button number” type=”button” value=”5” onClick=”calc.display.value+=5”>
<input class=”button number” type=”button” value=”6” onClick=”calc.display.value+=6”>
<input class=”button opps” type=”button” value=”-” onClick=”calc.display.value+=’-‘”>
<input class=”button opps” type=”button” value=”%” onClick=”calc.display.value+=’%’”>
<input class=”button” type=”button” value=”cos” onClick=”cos_function()”>
<br>

<input class=”button number” type=”button” value=”7” onClick=”calc.display.value+=7”>
<input class=”button number” type=”button” value=”8” onClick=”calc.display.value+=8”>
<input class=”button number” type=”button” value=”9” onClick=”calc.display.value+=9”>
<input class=”button opps” type=”button” value=”*” onClick=”calc.display.value+=’*’”>
<input class=”button” type=”button” value=”n!” onClick=”fact_function()”>
<input class=”button” type=”button” value=”sin” onClick=”sin_function()”>
<br>
<input class=”button opps” type=”button” value=”.” onClick=”calc.display.value+=’.’”>
<input class=”button number” type=”button” value=”0” onClick=”calc.display.value+=0”>
<input class=”button opps” type=”button” value=”,” onClick=”calc.display.value+=’,’”>
<input class=”button opps” type=”button” value=”+” onClick=”calc.display.value+=’+’”>
<input class=”button opps” type=”button” value=”/” onClick=”calc.display.value+=’/’”>
<input class=”button” type=”button” value=”tan” onClick=”tan_function()”>
<br>
<input class=”button” type=”button” value=”E” onClick=”calc.display.value+=2.718”>
<input class=”button” type=”button” value=”pi” onClick=”calc.display.value+=3.141”>
<input class=”button” type=”button” value=”x^y” onClick=”power_function()”>
<input class=”button” type=”button” value=”(” onClick=”openpara(this.value)”>
<input class=”button” type=”button” value=”)” onClick=”closepara(this.value)”>
<input class=”button” type=”button” value=”log” onClick=”log_function()”>
<br>
<input class=”button” type=”button” value=”sqrt” onClick=”sqrt_function()”>
<input class=”button” type=”button” value=”LN2” onClick=”calc.display.value+=0.693”>
<input class=”button” type=”button” value=”LN10” onClick=”calc.display.value+=2.302”>
<input class=”button” type=”button” value=”log2E” onClick=”calc.display.value+=1.442”>
<input class=”button” type=”button” value=”log10E” onClick=”calc.display.value+=0.434”>
<input class=”button” type=”button” value=”EXP” onClick=”exp_function”>
</form>
</div>
</div>
</body>

At this point you should get an output like this,



Step-2: JavaScript to carry on the operations
As you can see there is a global variable called flag set to 0 initially. This variable checks the number of opening parenthesis and the closing ones to avoid errors due to parenthesis. Each time an opening bracket is clicked, the flag is incremented and each time a closing bracket is clicked, it is decremented so that finally its value will become 0.
We are making use of the javaScript’s inbuilt functions wherever possible like cos(), sin(), tan(),sqrt(), log(), etc,. These functions belong to the Math object and hence we access them using it like this “Math.cos()”. And in the display of the calculator, when any of these operations is clicked, it displays the function along with the Math object like this “Math.function()”. I know displaying objects is not a good practice but i tried a few possible ways and couldn’t come up with a better code so if any of you guys have a better solution leave it in the comment and I’ll be really happy to take a look at it.
<script>
flag = 0;
function openpara(val)
{
calc.display.value+=val;
flag+=1;
}
function closepara(valval)
{
calc.display.value+=valval;
flag-=1;
}
function backspace(calc)
{
var size = calc.display.value.length;
calc.display.value=calc.display.value.substring(0,size-1);
}
function Resetfunction(calc)
{
calc.display.value=” “;
flag=0;
}
function cos_function()
{
flag+=1;
calc.display.value+=’Math.cos(‘;
}
function sin_function()
{
flag+=1;
calc.display.value+=’Math.sin(‘;
}
function tan_function()
{
flag+=1;
calc.display.value+=’Math.tan(‘;
}
function log_function()
{
flag+=1;
calc.display.value+=’Math.log(‘;
}
function sqrt_function()
{
flag+=1;
calc.display.value+=’Math.sqrt(‘;
}
function exp_function()
{
flag+=1;
calc.display.value+=’Math.exp(‘;
}
function fact(x)
{
factvar=1;
for (i=1;i<=x;i++)
{
factvar=factvar*i;
}
return factvar;
}
function fact_function(x)
{
flag+=1;
calc.display.value+=’fact(‘;
}
function power_function(x)
{
flag+=1;
calc.display.value+=’Math.pow(x,y’;
}
function evaluation(calc)
{
n = calc.display.value;
var size = calc.display.value.length;
var lastchar = calc.display.value.charAt(size)
if(isNaN(lastchar) && lastchar!=”)” && lastchar!=”!”)   {calc.display.value=”syntax error”;}
else if(flag!=0){calc.display.value=”error:paranthesis”;}
else {
result=eval(n);
calc.display.value=result;}
}
</script>
Step-3: Making the calculator look pretty
Now that the important part of our calculator is over, it is all up to css to make it look beautiful. You can also toss in some of your own ideas to make it look even better.
<style>
*{padding:0;
margin:0;
}
body {text-align:center;
background-color:#637ACB;
}
#heading {margin-top:30px;}
#form_wrapper {width:405px;
height:450px;
margin:30px auto auto 420px;
background-color:#000;
text-align:center;
border-radius:10px;
border-right:2px groove #333;
box-shadow:4px 4px 2px #666666;}
#formone{padding-top:10px;}
#display {width:380px;
height:40px;
font-size:18px;
color:black;
margin:4px;
border:2px inset black;
border-bottom:1px inset #FFF;
border-right:1px inset #FFF;
background-color:#D5F192;}
.button {width:60px;
height:60px;
margin:1px;}
.number {font-size:16px;
font-weight:bold;}
.opps {font-size:18px;}
.three {font-weight:bold;
background-color:#FBB9A8;
}
.three:hover{background-color:#F66;}
</style>
That’s it you’re done.Play around by adding more functions and enjoy.
Your calculator will be displayed as,



No comments:

Post a Comment