Skip to content

Calculator HTML code free

  • by

Looking for a free calculator HTML code without the need for CSS or JavaScript? Here’s a simple and straightforward example you can use as a starting point.

This basic calculator includes all the necessary buttons for simple calculations, and it’s built using an HTML table to organize the layout.

Calculator HTML code with JS and CSS

Simple example you can copy this free code.

<!DOCTYPE html>
<html>
<head>
	<title>Calculator</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #f2f2f2;
		}
		
		h1 {
			text-align: center;
		}
		
		#calculator {
			margin: 0 auto;
			background-color: #fff;
			border-radius: 5px;
			box-shadow: 0 2px 5px rgba(0,0,0,0.3);
			padding: 20px;
			width: 300px;
		}
		
		input[type="button"] {
			background-color: #4CAF50;
			border: none;
			color: #fff;
			cursor: pointer;
			font-size: 16px;
			margin: 2px;
			padding: 10px;
			width: 60px;
		}
		
		input[type="text"] {
			background-color: #fff;
			border: none;
			color: #000;
			font-size: 24px;
			margin: 2px;
			padding: 10px;
			text-align: right;
			width: 240px;
		}
	</style>
</head>
<body>
	<h1>Calculator</h1>
	<div id="calculator">
		<input type="text" id="result" readonly>
		<input type="button" value="7" onclick="document.getElementById('result').value += '7'">
		<input type="button" value="8" onclick="document.getElementById('result').value += '8'">
		<input type="button" value="9" onclick="document.getElementById('result').value += '9'">
		<input type="button" value="/" onclick="document.getElementById('result').value += '/'">
		<input type="button" value="4" onclick="document.getElementById('result').value += '4'">
		<input type="button" value="5" onclick="document.getElementById('result').value += '5'">
		<input type="button" value="6" onclick="document.getElementById('result').value += '6'">
		<input type="button" value="*" onclick="document.getElementById('result').value += '*'">
		<input type="button" value="1" onclick="document.getElementById('result').value += '1'">
		<input type="button" value="2" onclick="document.getElementById('result').value += '2'">
		<input type="button" value="3" onclick="document.getElementById('result').value += '3'">
		<input type="button" value="-" onclick="document.getElementById('result').value += '-'">
		<input type="button" value="0" onclick="document.getElementById('result').value += '0'">
		<input type="button" value="." onclick="document.getElementById('result').value += '.'">
		<input type="button" value="=" onclick="document.getElementById('result').value = eval(document.getElementById('result').value)">
		<input type="button" value="+" onclick="document.getElementById('result').value += '+'">
		<input type="button" value="C" onclick="document.getElementById('result').value = ''">
	</div>
</body>
</html>

Output:

Calculator HTML code free

This calculator has a simple design and basic functionality. You can customize it further to suit your needs.

Note: using eval() to evaluate the mathematical expression is not always safe, so it’s recommended to use a more robust solution if you’re

Create a calculator using just HTML markup. Here’s a basic calculator HTML code that doesn’t require any CSS or JavaScript:

<!DOCTYPE html>
<html>
<head>
	<title>Calculator</title>
</head>
<body>
	<table border="1">
		<tr>
			<td colspan="4"><input type="text" name="result" id="result" disabled></td>
		</tr>
		<tr>
			<td><input type="button" value="7" onclick="document.getElementById('result').value += '7'"></td>
			<td><input type="button" value="8" onclick="document.getElementById('result').value += '8'"></td>
			<td><input type="button" value="9" onclick="document.getElementById('result').value += '9'"></td>
			<td><input type="button" value="/" onclick="document.getElementById('result').value += '/'"></td>
		</tr>
		<tr>
			<td><input type="button" value="4" onclick="document.getElementById('result').value += '4'"></td>
			<td><input type="button" value="5" onclick="document.getElementById('result').value += '5'"></td>
			<td><input type="button" value="6" onclick="document.getElementById('result').value += '6'"></td>
			<td><input type="button" value="*" onclick="document.getElementById('result').value += '*'"></td>
		</tr>
		<tr>
			<td><input type="button" value="1" onclick="document.getElementById('result').value += '1'"></td>
			<td><input type="button" value="2" onclick="document.getElementById('result').value += '2'"></td>
			<td><input type="button" value="3" onclick="document.getElementById('result').value += '3'"></td>
			<td><input type="button" value="-" onclick="document.getElementById('result').value += '-'"></td>
		</tr>
		<tr>
			<td><input type="button" value="0" onclick="document.getElementById('result').value += '0'"></td>
			<td><input type="button" value="." onclick="document.getElementById('result').value += '.'"></td>
			<td><input type="button" value="=" onclick="document.getElementById('result').value = eval(document.getElementById('result').value)"></td>
			<td><input type="button" value="+" onclick="document.getElementById('result').value += '+'"></td>
		</tr>
		<tr>
			<td colspan="4"><input type="button" value="C" onclick="document.getElementById('result').value = ''"></td>
		</tr>
	</table>
</body>
</html>

Output:

calculator using just HTML markup

Just copy and paste the code into your HTML editor and customize it to fit your needs.

Do comment if you have any doubts or suggestions on this HTML code.

Note: The All HTML Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading