If you want a “miserable parody of a calculator,” we can make a calculator that barely works, gives incorrect results sometimes, and has an annoying UI. Here’s a fun, broken, and frustrating version:
– It randomly gives wrong answers.
– Sometimes it ignores user input.
– The buttons move when hovered over.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Miserable Parody of a Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
#display {
width: 200px;
height: 40px;
font-size: 20px;
text-align: right;
margin-bottom: 10px;
border: 2px solid black;
padding: 5px;
}
.button {
width: 50px;
height: 50px;
font-size: 18px;
margin: 5px;
cursor: pointer;
position: relative;
}
.button:hover {
top: randomOffset();
left: randomOffset();
}
</style>
</head>
<body>
<h1>Miserable Calculator</h1>
<input type="text" id="display" readonly>
<br>
<button class="button" onclick="press(1)">1</button>
<button class="button" onclick="press(2)">2</button>
<button class="button" onclick="press(3)">3</button>
<button class="button" onclick="press('+')">+</button>
<br>
<button class="button" onclick="press(4)">4</button>
<button class="button" onclick="press(5)">5</button>
<button class="button" onclick="press(6)">6</button>
<button class="button" onclick="press('-')">-</button>
<br>
<button class="button" onclick="press(7)">7</button>
<button class="button" onclick="press(8)">8</button>
<button class="button" onclick="press(9)">9</button>
<button class="button" onclick="press('*')">*</button>
<br>
<button class="button" onclick="clearDisplay()">C</button>
<button class="button" onclick="press(0)">0</button>
<button class="button" onclick="calculate()">=</button>
<button class="button" onclick="press('/')">/</button>
<script>
let display = document.getElementById('display');
function press(value) {
if (Math.random() < 0.2) { // 20% chance of ignoring input
return;
}
display.value += value;
}
function clearDisplay() {
display.value = "";
}
function calculate() {
try {
let result = eval(display.value);
// 30% chance of giving a wrong answer
if (Math.random() < 0.3) {
result += Math.floor(Math.random() * 10) - 5;
}
display.value = result;
} catch {
display.value = "Error!";
}
}
function randomOffset() {
return Math.floor(Math.random() * 10 - 5) + 'px';
}
</script>
</body>
</html>