Home ›Html and Css ›Calculator using javascript
MASIGNASUKAv102
6510051498749449419

Calculator using javascript

Calculator using javascript
Add Comments
Sunday, January 8, 2023
Hello dosto, आज के इस blog में मैं आप लोगों को बताऊंगा कि हम Javascript  का use करके simple calculator  कैसे बनाएं ?




How to create simple calculator using html, css and javascript 

Html code for taking input from user 
<body>
	<form method="POST" name="m1" class="m1">
		<br>
		<h2 align="center"> Calculator </h2>              
                                     First Number:&nbsp &nbsp&nbsp&nbsp
				      <input type="text" name="t1"/><br>
				     <br>
				       Second Number: 
					<input type="text" name="t2"/><br>
				    <br>
				      Result:  &nbsp &nbsp  &nbsp&nbsp &nbsp&nbsp&nbsp &nbsp &nbsp &nbsp       
				     <input type="text" name="t3"/><br><br>
				
					<input type="button" name="t5" value="Addition" onclick="add()" />
					<input type="button" name="t6" value="Substraction" onclick="sub()" />
					<input type="button" name="t4" value="Multiplication" onclick="mul()" />
                                        <input type="button" name="t7" value="Division" onclick="div()" />
						
	</form>
</body>

Css code 


<style>
input[type=button]:hover{
background :blue; 
color:white;
}
</style>


Script to  perform operations


<script type="text/javascript">
		
		function add()
		{
			var a=eval(document.m1.t1.value);
			var b=eval(document.m1.t2.value);
			var c=a+b;
			document.m1.t3.value=c;
		}

		function sub()
		{
			var a=eval(document.m1.t1.value);
			var b=eval(document.m1.t2.value);
			var c=a-b;
			document.m1.t3.value=c;
		}
              
               function mul()
		{
			var a=eval(document.m1.t1.value);
			var b=eval(document.m1.t2.value);
			var	c=a*b;
			document.m1.t3.value=c;
		}

		function div()
		{
			var a=eval(document.m1.t1.value);
			var b=eval(document.m1.t2.value);
			var c=a/b;
			document.m1.t3.value=c;
		}
	</script>


Html, css and Javascript code 



<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Calculator</title>
<style>
input[type=button]:hover{
background :blue; 
color:white;
}
</style>
	<script type="text/javascript">
		
		

		function add()
		{
			var a=eval(document.m1.t1.value);
			var b=eval(document.m1.t2.value);
			var c=a+b;
			document.m1.t3.value=c;
		}

		function sub()
		{
			var a=eval(document.m1.t1.value);
			var b=eval(document.m1.t2.value);
			var c=a-b;
			document.m1.t3.value=c;
		}
              
               function mul()
		{
			var a=eval(document.m1.t1.value);
			var b=eval(document.m1.t2.value);
			var	c=a*b;
			document.m1.t3.value=c;
		}

		function div()
		{
			var a=eval(document.m1.t1.value);
			var b=eval(document.m1.t2.value);
			var c=a/b;
			document.m1.t3.value=c;
		}
	</script>
</head>
<body>
	<form method="POST" name="m1" class="m1">
		<br>
		<h2 align="center"> Calculator </h2>
		
				 
                  
                                     First Number:&nbsp &nbsp&nbsp&nbsp
				      <input type="text" name="t1"/><br>
				     <br>
				       Second Number: 
					<input type="text" name="t2"/><br>
				    <br>
				      Result:  &nbsp &nbsp  &nbsp&nbsp &nbsp&nbsp&nbsp &nbsp &nbsp &nbsp       
				     <input type="text" name="t3"/><br><br>
				
					<input type="button" name="t5" value="Addition" onclick="add()" />
					<input type="button" name="t6" value="Substraction" onclick="sub()" />
					<input type="button" name="t4" value="Multiplication" onclick="mul()" />
                                        <input type="button" name="t7" value="Division" onclick="div()" />
						
	</form>
</body>
</html>

MCA Waala

comment 0 comments

more_vert