Spaces:
Running
Running
File size: 4,170 Bytes
815e811 fcba6f7 815e811 fcba6f7 815e811 fcba6f7 815e811 fcba6f7 815e811 fcba6f7 815e811 fcba6f7 815e811 fcba6f7 815e811 fcba6f7 815e811 fcba6f7 815e811 fcba6f7 815e811 fcba6f7 815e811 fcba6f7 815e811 fcba6f7 815e811 fcba6f7 815e811 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator Game</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.calculator {
width: 300px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
background: #fff;
}
.display {
background-color: #222;
color: #fff;
font-size: 2rem;
text-align: right;
padding: 20px;
box-sizing: border-box;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.button {
border: 1px solid #ddd;
padding: 20px;
font-size: 1.5rem;
cursor: pointer;
transition: background 0.3s;
}
.button:hover {
background-color: #f7f7f7;
}
.explode {
animation: explode 0.5s forwards;
}
@keyframes explode {
0% { transform: scale(1); }
100% { transform: scale(0); }
}
</style>
</head>
<body>
<div class="calculator">
<div class="display" id="display">0</div>
<div class="buttons">
<div class="button">7</div>
<div class="button">8</div>
<div class="button">9</div>
<div class="button">/</div>
<div class="button">4</div>
<div class="button">5</div>
<div class="button">6</div>
<div class="button">*</div>
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button">-</div>
<div class="button">0</div>
<div class="button">C</div>
<div class="button">=</div>
<div class="button">+</div>
</div>
</div>
<!-- Placeholder for explosion sound -->
<audio id="explosionSound" src="explosion.mp3"></audio>
<script>
const display = document.getElementById('display');
const explosionSound = document.getElementById('explosionSound');
let expression = '';
document.querySelectorAll('.button').forEach(button => {
button.addEventListener('click', () => {
const value = button.textContent;
if (value === 'C') {
expression = '';
display.textContent = '0';
} else if (value === '=') {
try {
if (expression.includes('/0')) {
explodeScreen();
} else {
expression = eval(expression).toString();
display.textContent = expression;
}
} catch {
display.textContent = 'Error';
expression = '';
}
} else {
expression += value;
display.textContent = expression;
}
});
});
function explodeScreen() {
explosionSound.play();
display.textContent = 'Boom!';
document.querySelector('.calculator').classList.add('explode');
setTimeout(() => {
expression = '';
display.textContent = '0';
document.querySelector('.calculator').classList.remove('explode');
}, 500);
}
</script>
</body>
</html><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script> |