HTML5 Calculator Code: Simple and Functional

<!DOCTYPE html>
<html>
<head>
	<title>HTML5 Calculator</title>
	<style type="text/css">
		#calculator {
			margin: 50px auto;
			width: 250px;
			background-color: #f2f2f2;
			padding: 10px;
			border-radius: 5px;
		}
<pre><code>	input[type=&quot;button&quot;] {
		width: 50px;
		height: 50px;
		background-color: #ccc;
		border: none;
		margin: 5px;
		border-radius: 5px;
		font-size: 24px;
		cursor: pointer;
	}

	input[type=&quot;text&quot;] {
		width: 210px;
		height: 50px;
		font-size: 24px;
		border-radius: 5px;
		border: none;
		text-align: right;
		padding: 5px;
		margin-top: 10px;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<div id="calculator">
		<input type="text" id="result" readonly>
		<input type="button" value="7" onclick="addToResult('7')">
		<input type="button" value="8" onclick="addToResult('8')">
		<input type="button" value="9" onclick="addToResult('9')">
		<input type="button" value="+" onclick="addToResult('+')"><br>
		<input type="button" value="4" onclick="addToResult('4')">
		<input type="button" value="5" onclick="addToResult('5')">
		<input type="button" value="6" onclick="addToResult('6')">
		<input type="button" value="-" onclick="addToResult('-')"><br>
		<input type="button" value="1" onclick="addToResult('1')">
		<input type="button" value="2" onclick="addToResult('2')">
		<input type="button" value="3" onclick="addToResult('3')">
		<input type="button" value="x" onclick="addToResult('*')"><br>
		<input type="button" value="C" onclick="clearResult()">
		<input type="button" value="0" onclick="addToResult('0')">
		<input type="button" value="=" onclick="calculateResult()">
		<input type="button" value="/" onclick="addToResult('/')">
	</div>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
	function addToResult(value) {
		document.getElementById('result').value += value;
	}

	function clearResult() {
		document.getElementById('result').value = '';
	}

	function calculateResult() {
		try {
			document.getElementById('result').value = eval(document.getElementById('result').value);
		} catch(e) {
			alert('Invalid Expression');
		}
	}
&lt;/script&gt;
</code></pre>
</body>
</html>
<p>This is a basic calculator that can perform addition, subtraction, multiplication, and division. It has an input box and buttons. You can click the buttons to add numbers and operators to the input box. When you click the &quot;=&quot; button, it will calculate the expression in the input box and display the result. If the expression is invalid, an alert box will pop up.</p>