logo image

Simple calculator program with HTML, javascript & jQuery

Views: 194

Demo

Code

<html>

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
	</script>

	<script>
		$(document).ready(function() {
			$("#result").toggleClass("result");

			//Addition
			$("#add").click(function() {
				var a = $("#cal1").val();
				var b = $("#cal2").val();
				$("#result").html(+a + +b);

			});

			//Subtraction
			$("#sub").click(function() {
				var a = $("#cal1").val();
				var b = $("#cal2").val();
				$("#result").html(+a - +b);
			});

			//Multiplication
			$("#mul").click(function() {
				var a = $("#cal1").val();
				var b = $("#cal2").val();
				$("#result").html(+a * +b);
			});

			//Division
			$("#div").click(function() {
				var a = $("#cal1").val();
				var b = $("#cal2").val();
				$("#result").html(+a / +b);

			});

		});
	</script>
	<style>
		.result {
			font-size: xx-large;
			color: blue;
		}
	</style>
</head>

<body>


	<div>
		Enter Number :
		<input type="text" id="cal1"><br><br> Enter Number :
		<input type="text" id="cal2"><br><br>


		<button type="button" id="add"> Add </button>
		<button type="button" id="sub"> Sub </button>
		<button type="button" id="mul"> Mul </button>
		<button type="button" id="div"> Div</button><br><br><br> Result is:
		<p id="result"></p>

	</div>
</body>

</html>