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