Home » JavaScript

JavaScript code to design calculator

In this JavaScript program, we are going to learn how to create a basic calculator? Here, we are create a basic calculatorfor that we are using eval JavaScript function and user define function.
Submitted by Ashish Varshney, on March 18, 2018

Description:

For creating a basic calculator in JavaScript, we use table structure, input type button and eval JavaScript function.

  • Input type button use to take input from user.
  • Table structure is use to create calculator structure.
  • Eval function to evaluate the function.

The output looks like...

Calculator in JavaScript

Code to design Calculator

<html>
<head>
	<script>
		
		function d(val){
			document.getElementById('result').value+=val;
		}
		function solve(){
			var value1= document.getElementById('result').value;
			let res = eval(value1);
			document.getElementById('result').value=res;	
		}
		functioncleard(){
		document.getElementById('result').value="";
		}
			
	</script>

	<style type="text/css">
		body,html{
			matgin:0px;
		}
		input[type="button"]{
			border:none;
			width:100%;
			outline: none;
		}
		#wrap
		{
			margin:10%;
		}
	</style>
</head>
<body>
	<div id='wrap'>
	<table border="1">
		<tr>
			<td colspan="3"><input type="text" id="result" readonly></td>
			<td><input type="button" value="C"  onClick="cleard()"></td>
		</tr>
		<tr>
			<td><input type="button" value="1" onClick="d('1')"></td>
			<td><input type="button" value="2" onClick="d('2')"></td>
			<td><input type="button" value="3" onClick="d('3')"></td>
			<td><input type="button" value="+" onClick="d('+')"></td>
		</tr>
		<tr>
			<td><input type="button" value="4" onClick="d('4')"></td>
			<td><input type="button" value="5" onClick="d('5')"></td>
			<td><input type="button" value="6" onClick="d('6')"></td>
			<td><input type="button" value="-" onClick="d('-')"></td>
		</tr>
		<tr>
			<td><input type="button" value="7" onClick="d('7')"></td>
			<td><input type="button" value="8" onClick="d('8')"></td>
			<td><input type="button" value="9" onClick="d('9')"></td>
			<td><input type="button" value="/" onClick="d('/')"></td>
		</tr>
		<tr>
			<td><input type="button" value="*" onClick="d('*')"></td>
			<td><input type="button" value="0" onClick="d('0')"></td>
			<td><input type="button" value="." onClick="d('.')"></td>
			<td><input type="button" value="=" onClick="solve()"></td>
		</tr>
	</table>
	</div>
</body>
</html>





Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.