<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>

O Level Exam : Practical Question

🖥 Output: