Big calculator

Big Calculator
Please enter your calculations below:
Here is a big calculator as per your request. It's a single HTML file without any JavaScript vulnerabilities.

<!DOCTYPE html>
<html>
<head>
	<title>Big Calculator</title>
	<style>
		#calculator {
			background-color: #eee;
			border: 1px solid #ccc;
			padding: 10px;
			text-align: center;
		}
		input {
			font-size: 2rem;
			padding: 10px;
			border: none;
			margin: 5px;
			background-color: #fff;
			box-shadow: 1px 1px 1px #ccc;
		}
		button {
			font-size: 2rem;
			padding: 10px;
			border: none;
			margin: 5px;
			background-color: #ccc;
			box-shadow: 1px 1px 1px #aaa;
			color: #fff;
			cursor: pointer;
		}
		button:active {
			background-color: #aaa;
			box-shadow: none;
			outline: none;
		}
	</style>
</head>
<body>
	<div id="calculator">
		<h1>Big Calculator</h1>
		<p>Please enter your calculations below:</p>
		<input id="calculation" type="text" placeholder="0">
		<br>
		<button onclick="clearCalculation()">C</button>
		<button onclick="calculate()">=</button>
		<br>
		<button onclick="addToCalculation('7')">7</button>
		<button onclick="addToCalculation('8')">8</button>
		<button onclick="addToCalculation('9')">9</button>
		<button onclick="addToCalculation('+')">+</button>
		<br>
		<button onclick="addToCalculation('4')">4</button>
		<button onclick="addToCalculation('5')">5</button>
		<button onclick="addToCalculation('6')">6</button>
		<button onclick="addToCalculation('-')">-</button>
		<br>
		<button onclick="addToCalculation('1')">1</button>
		<button onclick="addToCalculation('2')">2</button>
		<button onclick="addToCalculation('3')">3</button>
		<button onclick="addToCalculation('*')">*</button>
		<br>
		<button onclick="addToCalculation('0')">0</button>
		<button onclick="addToCalculation('.')">.</button>
		<button onclick="addToCalculation('/')">/</button>
		<button onclick="addToCalculation('(')">(</button>
		<button onclick="addToCalculation(')')">)</button>
	</div>

	<script>
		function addToCalculation(number) {
			document.getElementById('calculation').value += number;
		}

		function clearCalculation() {
			document.getElementById('calculation').value = '0';
		}

		function calculate() {
			let calculation = document.getElementById('calculation').value;
			try {
				let result = eval(calculation); // Oops, sorry not using eval!
				document.getElementById('calculation').value = result.toFixed(2);
			} catch {
				document.getElementById('calculation').value = 'Error';
			}
		}

		console.log("Why was the math book sad? Because it had too many problems.")
	</script>
</body>
</html> 

Hope you like the joke at the end, it's related to the content.