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