Creating Advance Calculator In Javascript

I was publish an article about JavaScript and was deeply  discuss on it. Everyone knows that JavaScript is scripting language which is used to create server side scripts. We can make dynamic Webpages using JavaScript and it has increase user interactivity on Web Browser For Example: If user write own name on text field we provide on website and user click to the button so using the custom scripts we can shows the user “Welcome” or anything we want. JavaScript is also a perfect language to create animations and we can set animation to any object any direction. I was discuss in my previous article that we can make simple and advance calculator in JavaScript because it has possibilities of calculating system so in this section I will teach that how to make advance calculator using JavaScript functions. Functions are most important part of this scripting language if you want to work on it so you have to learn all these functions. You can learn these all from my previous post included with videos.

javascript calculator

Complete Script:

Here is a complete script for our viewers better understanding. In this script I worked on CSS and JS functions. You can get idea from it.

<html>

<head>

<title> Learning JavaScript </title>

</head>

<body bgcolor=”black”>

<center><br>

<h1><b><font color =”yellow” style = “font-size:70”> Calculator </font></h1></b>

<hr size = 20 color = “green”>

<div style = “width:261px; background:FFF8DC;”>

<form name =”calc”>

<input name =”display” placeholder = “0” style =”width:254px; height:60px; text-align:right; font-size:30px; border-radius:8px; margin:3px; color:red;”/>

<br>

<input type =”button” value=”7″ onClick =”document.calc.display.value +=’7′” style = “width:60px; height:60px; font-size:30px; border-radius:8px; margin:3px; color:red; background:yellow;”/>

<input type =”button” value=”8″ onClick =”document.calc.display.value +=’8′” style = “width:60px; height:60px; font-size:30px; border-radius:8px;”/>

<input type =”button” value=”9″ onClick =”document.calc.display.value +=’9′” style = “width:60px; height:60px; font-size:30px; border-radius:8px;”/>

<input type =”button” value=”+” onClick =”btnplus()” style = “width:60px; height:60px; font-size:30px; border-radius:8px;”/>

<br>

<input type =”button” value=”4″ onClick =”document.calc.display.value +=’4′” style = “width:60px; height:60px; font-size:30px; border-radius:8px; margin:3px;”/>

<input type =”button” value=”5″ onClick =”document.calc.display.value +=’5′” style = “width:60px; height:60px; font-size:30px; border-radius:8px;”/>

<input type =”button” value=”6″ onClick =”document.calc.display.value +=’6′” style = “width:60px; height:60px; font-size:30px; border-radius:8px;”/>

<input type =”button” value=”-” onClick =”btnsub()” style = “width:60px; height:60px; font-size:30px; border-radius:8px;”/>

<br>

<input type =”button” value=”1″ onClick =”document.calc.display.value +=’1′” style = “width:60px; height:60px; font-size:30px; border-radius:8px; margin:3px;”/>

<input type =”button” value=”2″ onClick =”document.calc.display.value +=’2′” style = “width:60px; height:60px; font-size:30px; border-radius:8px;”/>

<input type =”button” value=”3″ onClick =”document.calc.display.value +=’3′” style = “width:60px; height:60px; font-size:30px; border-radius:8px;”/>

<input type =”button” value=”*” onClick =”btnmult()” style = “width:60px; height:60px; font-size:30px; border-radius:8px;”/>

<br>

<input type =”button” value=”0″ onClick =”document.calc.display.value +=’0′” style = “width:60px; height:60px; font-size:30px; border-radius:8px; margin:3px;”/>

<input type =”button” value=”%” onClick =”btnMod()” style = “width:60px; height:60px; font-size:30px; border-radius:8px;”/>

<input type =”button” value=”.” onClick =”btndot()” style = “width:60px; height:60px; font-size:30px; border-radius:8px;”/>

<input type =”button” value=”/” onClick =”btndiv()” style = “width:60px; height:60px; font-size:30px; border-radius:8px;”/>

<br>

<input type =”button” value=”=” onClick =”document.calc.display.value = eval(document.calc.display.value)”  style =”width:120px; height:60px; font-size:30px; border-radius:8px; margin:3px;”/>

<input type =”button” value=”C” onClick =”btnclear()” style =”width:120px; height:60px; font-size:30px; border-radius:8px; margin:3px;”/>

</form></div>

<hr size =20 color = “black”>

<Script>

function btnplus()

{

document.calc.display.value +=”+”;

document.calc.display.style.textAlign=”right”;

}

function btnsub()

{

document.calc.display.value +=”-“;

document.calc.display.style.textAlign=”right”;

}

function btnmult()

{

document.calc.display.value +=”*”;

document.calc.display.style.textAlign=”right”;

}

function btnMod()

{

document.calc.display.value +=”%”;

document.calc.display.style.textAlign=”right”;

}

function btndot()

{

document.calc.display.value +=”.”;

document.calc.display.style.textAlign=”right”;

}

function btndiv()

{

document.calc.display.value +=”/”;

document.calc.display.style.textAlign=”right”;

}

function btnclear()

{

document.calc.display.value =””;

document.calc.display.style.textAlign=”right”;

}

</Script>

</center>

</body>

</html>

Output On Web Browser:

javascript calculator script

Video Tutorials:

Here is a video tutorial of creating complete advance calculator in JS so it can be also good option for our viewers. if this is helpful then please post comments and share it to others.

Ahsan Ali

Mohammad Ahsan Ali is a Web Designer, Web Developer and Online Instructor working as online Computer Instructor since last 1 year. My Mission is that conveys knowledge to everyone and want to make everyone successful in their life.

Leave a Reply

Your email address will not be published. Required fields are marked *