Hi 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
Let's createa
Step- 2: JavaScript to carry on the operations
Now we will add Javascript.
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.
Step-1: Creating the HTML file
Let's create
<! DOCTYPE html><html lang="en"> <head > <meta charset="UTF-8"> <title >Calculator with Javascript</title> <link rel="stylesheet" href="style.css"> <script type="text/javascript"></script> </head > <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="buttonopps" type="button" value="-" onClick="calc.display.value+='-'"> <input class="buttonopps" 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 > <script src="calc . js "></script> </body ></> html
S
Now we will add Javascript.
= 0; flag function openpara ( val ) {calc display . value+=val;flag+=1;} . function closepara ( valval ) {calc display . value+=valval; . -=1;} flag backspace function ( calc ) {size = var calc display . value . length; . calc display . value=calc . display . value . substring . 0 ( size-1); , } function Resetfunction ( calc ) {calc display . value=" "; .
flag=0;}cos_function function ){flag+=1; ( calc display . value+='Math . cos . ';} ( sin_function function ){flag+=1; ( calc display . value+='Math . sin . ';} ( tan_function function ){flag+=1; ( calc display . value+='Math . tan . ';} ( log_function function ){flag+=1; ( calc display . value+='Math . log . ';} ( sqrt_function function ){flag+=1; ( calc display . value+='Math . . sqrt ';} ( exp_function function ){flag+=1; ( calc display . value+='Math . . exp ';} ( fact function x){factvar=1; ( (i=1;i<=x;i++){factvar=factvar*i;} for return ;} factvar fact_function function x){flag+=1; ( calc display . value+='fact . ';} ( power_function function x){flag+=1; ( calc display . value+='Math . . pow x ( y';} , evaluation function ( ){ calc = n calc display . value; . size = var calc display . value . length; . var = lastchar calc display . value . . charAt size) ( if ( isNaN ( ) && lastchar lastchar =")" && ! lastchar ="!") { ! calc display . value="syntax error";} . if else flag ( =0 ! { ) calc display . value="error . : ";} paranthesis {result=eval else n); ( calc display . value=result;}} .
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.
*padding { 0; :
margin 0; :
}
{text-align body center; :
-color background #637ACB; :
}
#heading {margin-top30px;} :
#form_wrapper {width405px; :
height 450px; :
margin 30px auto auto 420px; :
-color background #000; :
-align text center; :
-radius border 10px; :
-right border 2px groove #333; :
-shadow box 4px 4px 2px #666666;} :
#formonepadding-top { 10px;} :
#display {width380px; :
height 40px; :
-size font 18px; :
color black; :
margin 4px; :
border 2px inset black; :
-bottom border 1px inset #FFF; :
-right border 1px inset #FFF; :
-color background #D5F192;} :
. {width button 60px; :
height 60px; :
margin 1px;} :
. {font-size number 16px; :
-weight font bold;} :
. {font-size opps 18px;} :
. {font-weight three bold; :
-color background #FBB9A8; :
}
. three hover : background-color { #F66;} :
