Simple Calculator JavaScript

A simple calculator that can perform athematic function (+, -, x, and /).

Html and JavaScript Cod of Simple Calculator

<!doctype html>
<html>
<head>
<title>Calculator using JavaSctipt</title>
	<link rel="stylesheet" href="styling.css">
</head>
<body>
	<script>
	function calculate(result){
		form.displayResult.value=form.displayResult.value+result;		
	}
	</script>
	<div class="main">
		<form name="form">
		<div class="show">
			<input type="text" placeholder="0" name="displayResult" />
		</div>
			<div class="buttons">
			  <div class="row">
				<input type="button" name="num7" value="7" onClick="calculate(num7.value)">
				  <input type="button" name="num8" value="8" onClick="calculate(num8.value)">
				  <input type="button" name="num9" value="9" onClick="calculate(num9.value)">
				  <input type="button" name="addb" value="+" onClick="calculate(addb.value)">
				</div>				
				<div class="row">
				<input type="button" name="num4" value="4" onClick="calculate(num4.value)">
				  <input type="button" name="num5" value="5" onClick="calculate(num5.value)">
				  <input type="button" name="num6" value="6" onClick="calculate(num6.value)">
				  <input type="button" name="subb" value="-" onClick="calculate(subb.value)">
				</div>
				
				<div class="row">
				<input type="button" name="num1" value="1" onClick="calculate(num1.value)">
				  <input type="button" name="num2" value="2" onClick="calculate(num2.value)">
				  <input type="button" name="num3" value="3" onClick="calculate(num3.value)">
				  <input type="button" name="multi" value="*" onClick="calculate(multi.value)">
				</div>
				
				<div class="row">
				<input type="button" name="num0" value="0" onClick="calculate(num0.value)">
				  <input type="button" name="point" value="." onClick="calculate(point.value)">
				  <input type="button" name="dvd" value="/" onClick="calculate(dvd.value)">
				  <input type="button" class="green" value="=" onClick="displayResult.value=eval(displayResult.value)">
				</div>
			</div>
		</form>
	</div>
</body>	
</html>

In the style, a CSS file named “styling.css” is linked. In that file, all the CSS that is being used is coded. You can find that file in the zip file below.

Output:

Download Code – JScalculator