Programming Examples

Calculator program in javascript


calculator program in javascript

Solution

<html>
	<head>
		<script>
			function type_data(data)
			{
				document.getElementById("output").value=document.getElementById("output").value+data;
			}
			function cal()
			{
				document.getElementById("output").value=eval(document.getElementById("output").value)
			}
			function clear_data()
			{
				document.getElementById("output").value="";
			}
			function back_one()
			{
				var x=document.getElementById("output").value;
				document.getElementById("output").value=x.substr(0,x.length-1);
			}
		</script>
		<style>
			input[type="text"]
			{
				padding:10px;
				width:100%
				font-size:30px;
				color:white;
				background: rgb(76,77,12);
				background: radial-gradient(circle, rgba(76,77,12,1) 45%, rgba(18,20,18,1) 100%);
			}
			input[type="button"]
			{
				padding:10px;
				color:white;
				width:40px;
				height:40px;
				box-shadow:1px 1px 1px white;
				border-radius:4px;
				background: rgb(34,195,195);
				background: radial-gradient(circle, rgba(34,195,195,1) 45%, rgba(10,119,156,1) 100%);
			}
			table
			{
				border:2px solid gray;
				box-shadow:3px 4px 4px black;
				margin-top:70px;
				background:gray;
			}
		</style>
	</head>
	<body>
		<table align="center">
			<tr>
				<td colspan="4"><input id="output" type="text" readonly/> </td>
			</tr>
			<tr>
				<td><input type="button" value="C" onclick="clear_data()"/></td>
				<td><input type="button" value="%" onclick="type_data(this.value)"/></td>
				<td><input type="button" value="&lArr;" onclick="back_one()"/></td>
				<td><input type="button" value="/" onclick="type_data(this.value)"/></td>
			</tr>
			<tr>
				<td><input type="button" value="7" onclick="type_data(this.value)"/></td>
				<td><input type="button" value="8" onclick="type_data(this.value)"/></td>
				<td><input type="button" value="9" onclick="type_data(this.value)"/></td>
				<td><input type="button" value="*" onclick="type_data(this.value)"/></td>
			</tr>
			<tr>
				<td><input type="button" value="4" onclick="type_data(this.value)"/></td>
				<td><input type="button" value="5" onclick="type_data(this.value)"/></td>
				<td><input type="button" value="6" onclick="type_data(this.value)"/></td>
				<td><input type="button" value="-" onclick="type_data(this.value)"/></td>
			</tr>
			<tr>
				<td><input type="button" value="1" onclick="type_data(this.value)"/></td>
				<td><input type="button" value="2" onclick="type_data(this.value)"/></td>
				<td><input type="button" value="3" onclick="type_data(this.value)"/></td>
				<td><input type="button" value="+" onclick="type_data(this.value)"/></td>
			</tr>
			<tr>
				<td><input type="button" value="00" onclick="type_data(this.value)"/></td>
				<td><input type="button" value="0" onclick="type_data(this.value)"/></td>
				<td><input type="button" value="." onclick="type_data(this.value)"/></td>
				<td><input type="button" value="=" onclick="cal()"/></td>
			</tr>
		</table>
	</body>
</html>
Output

CCC Online Test 2021 CCC Practice Test Hindi Python Programming Tutorials Best Computer Training Institute in Prayagraj (Allahabad) Best Java Training Institute in Prayagraj (Allahabad) Best Python Training Institute in Prayagraj (Allahabad) O Level Online Test in Hindi Bank SSC Railway TET UPTET Question Bank career counselling in allahabad Sarkari Naukari Notification Best Website and Software Company in Allahabad Sarkari Exam Quiz