How To create Calculator using JavaScript and HTML

0 9,010

Hi Friends in this article we are going to teach you How to create calculator using JavaScript and Html. A calculator is a device that performs arithmetics operations on numbers who make it in tutorial. The normal calculator can do only subtraction , addition , multiplication and devision. Other calculators can handle exponential operation , roots , logarithm’s , trigonometric functions and hyperbolic functions. Some calculator actually perform of these functions by repeated process of addtion. in this article we are learn Create Normal calculator using Javascript and HTML. Follow the Some steps Given Below.

How To create Calculator using JavaScript and HTML

Step : 1 Creating a Input Form fields For getting Numbers using HTML

in this step we are creating a form and create form field where give any numbers to calculate. copy the below source code and paste into HTML Editor and Save it is as “index.html”

<html>
	<head>
		<title> Calculator </title>
		<link rel="stylesheet" href="css/style.css" media="all" />
		<script src="js/calculator.js"></script>
	</head>
<body bgcolor="tan">
	<div id="container">
	  <h1 align="center" class="threed_effect">www.Sourcecodesite.in </h1>
	</div>
		<form name="f">
			<br/>
			<input type="text" name="result"  id="result" style="width:280px;
					height:40px;text-indent:10px;"  >
			<br/>
			<input type="text" name="display"  id="display"style="width:140px;
					height:25px;background-color:darkgray;font-size:10pt;text-indent:10px;" >
					
			<input type="button" onClick="Sign()" name="sign" value="+/-" style="margin:0px 1px;width:60px;
					height:25px;font-size:10pt" >
					
			<input type="button" onClick="Clear()" value="C"  style="margin:1px 1px;width:60px;
					height:25px;font-size:10pt"/>
			<br/>
	
			<input type="button" onClick="num1Perform()" name="num1" value="1" >
			<input type="button" onClick="num2Perform()" name="num2" value="2" >
			<input type="button" onClick="num3Perform()" name="num3" value="3" >
			<input type="button" onClick="Addition()" value="+" >
			<br/>
			<input type="button" onClick="num4Perform()" name="num4" value="4" >
			<input type="button" onClick="num5Perform()" name="num5" value="5" >
			<input type="button" onClick="num6Perform()" name="num6" value="6" >
			<input type="button" onClick="SubStract()" value="-" />
			<br/>
			<input type="button" onClick="num7Perform()" name="num7" value="7" >
			<input type="button" onClick="num8Perform()" name="num8" value="8" >
			<input type="button" onClick="num9Perform()" name="num9" value="9" >
			<input type="button" onClick="Muliply()" value="*" />
			<br/>
			<input type="button" onClick="num0Perform()" name="num0" value="0" >	
			<input type="button" onClick="Decimal()" name="decimal" value="." />
			<input type="button" onClick="Equal()" value="=" />
			<input type="button" onClick="Divison()" value="/" />
			<br/>
	<h1 class="style1" id="flaming">By.Deepak Kumar</h1>
	</form>
        <div id="container">
          <h1 align="center" class="threed_effect">www.Sourcecodesite.in </h1>
        </div>
</body>
</html>

Step : 2 Give Style For Input Field Using CSS

next step is make form more attractive and in this step we are use css to give style input field . copy the below source code and paste in your editor and save it is as “style.css”.

form{background-color:pink;
			text-align:center;
			width:300px;
			height:500px;margin:0 auto;
			border:2px solid red;
			}
		form input{background-color:cyan;
					width:60px;
					height:70px;
					margin:5px 5px;
					font-size:20pt;
					border-radius:50px;}
	#flaming {
width: 300px;
height: 20px;
font-size: 200%;
padding-top: 0px;
background-color:pink;
text-align:center;
color:red;
text-shadow: 0 0 4px white, 0 -5px 4px #FF3, 2px -10px 6px #FD3, -2px -15px 11px #F80, 2px -25px 18px #F20;
}


#container{
		width:700px;
		padding:0px;
		margin-left:auto;
		margin-right:auto;}
		
	h1.threed_effect{
		border:2px solid #f0f0f0;
		padding:10px 30px 10px 30px;
		font-family:Garamond, serif;
		line-height:1em;
		color:red;
		font-weight:bold;
		font-size:60px;
		text-shadow:0px 0px 0 rgb(226,226,226),
					1px 1px 0 rgb(211,211,211),
					2px 2px 0 rgb(197,197,197),
					3px 3px 0 rgb(182,182,182),
					4px 4px 0 rgb(168,168,168),
					5px 5px 0 rgb(153,153,153),
					6px 6px 0 rgb(139,139,139),
					7px 7px 6px rgba(0,0,0,0.45),
					7px 7px 1px rgba(0,0,0,0.5),
					0px 0px 6px rgba(0,0,0,.2);
	.style1 {color: #FF0000}

Step : 3 Validate All Input field using JavaScript

This is Final step to creating a Calculator. in this step we are going to validate every input field using javascript onClick events and use some javascript function. copy the below source code and paste in your HTML Editor and save it is as “calculator .js”

	var firstNum;
    var secondNum;
    var total;
    var plusminus;
    var plusClick;
    var minusClick;
    var multiplyClick;
    var devideClick;
	var decimalClick;
   
	
	function Clear() {                                   
        // Clear
        document.f.result.value="";
		document.f.display.value="";
		
    } 
	function num0Perform() {                                   
        // Zero
		document.f.display.value +=" 0";
        document.f.result.value += document.f.num0.value;
    } 
	function num1Perform() {                                   
        // NO1
		document.f.display.value +=" 1";
        document.f.result.value += document.f.num1.value;
    } 
	function num2Perform() {                                   
        // NO2
		document.f.display.value +=" 2";
        document.f.result.value += document.f.num2.value;
    } 
	function num3Perform() {                                   
        // NO3
		document.f.display.value +=" 3";
        document.f.result.value += document.f.num3.value;
    } 
	function num4Perform() {                                   
        // NO4
		document.f.display.value +=" 4";
        document.f.result.value += document.f.num4.value;
    } 
	function num5Perform() {                                   
        // NO5
		document.f.display.value +=" 5";
        document.f.result.value += document.f.num5.value;
    } 
	function num6Perform() {                                   
        // NO6
        document.f.display.value +=" 6";
		document.f.result.value += document.f.num6.value;
    } 
	function num7Perform() {                                   
        // NO7
		document.f.display.value +=" 7";
        document.f.result.value += document.f.num7.value;
    } 	
	function num8Perform() {                                   
        // NO8
		document.f.display.value +=" 8";
        document.f.result.value += document.f.num8.value;
    } 
	function num9Perform() {                                   
        // NO9
		document.f.display.value +=" 9";
        document.f.result.value += document.f.num9.value;
    } 
	function Sign(){
			document.f.display.value="-"+(document.f.result.value);
			document.f.result.value="-"+(document.f.result.value);
	 }
	function Addition(){
			firstNum = (parseFloat(document.f.result.value));
			document.f.display.value=(document.f.result.value)+" +";
			document.f.result.value="";
			plusClick = 1;
			decimalClick=0
			
			}
	function SubStract(){
			 firstNum = (parseFloat(document.f.result.value));
			 document.f.display.value=(document.f.result.value)+" -";
			document.f.result.value="";
			 minusClick=1;
			decimalClick=0
			 }
	function Muliply(){
			 firstNum = (parseFloat(document.f.result.value));
			 document.f.display.value=(document.f.result.value)+" *";
			 document.f.result.value="";
			 multiplyClick=1;
			decimalClick=0
			 }
	function Divison(){
			 firstNum = (parseFloat(document.f.result.value));
			 document.f.display.value=(document.f.result.value)+" /";
			 document.f.result.value="";
			 devideClick=1;
			 decimalClick=0
			 }
	function Decimal(){
			document.f.display.value=(document.f.result.value)+".";
			document.f.result.value=(document.f.result.value+".");
			}
	
	function Equal(){
			secondNum = (parseFloat(document.f.result.value));
				if (plusClick > 0) {
						total = firstNum + secondNum;
						document.f.result.value=total;
						document.f.display.value=firstNum +" + "+secondNum+" = "+total;
						firstNum = 0;
						secondNum = 0;
						plusClick = 0;
				}


				 if(minusClick>0){
						 total = firstNum - secondNum;
						 document.f.result.value=total;
						 document.f.display.value=firstNum +" - "+ secondNum+" = "+total;
						 firstNum = 0;
						 secondNum = 0;
						 minusClick = 0;
			 
				}                                      
		  if(multiplyClick>0){
						 total = firstNum * secondNum;
						document.f.result.value=total;
						document.f.display.value=firstNum +" * "+ secondNum+" = "+total;
						 firstNum = 0;
						 secondNum = 0;
						 multiplyClick = 0;
			 
			}

			 if(devideClick>0){
					 total = firstNum / secondNum;
					 document.f.result.value=total;
					 document.f.display.value=firstNum +" / "+ secondNum+" = "+total;
					 firstNum = 0;
					 secondNum = 0;
					 devideClick = 0;
			 }
	}

Preiview

calculator using javascript and HTML

Download Complete Source Code Here —

Download Source Code

Leave A Reply

Your email address will not be published.