Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Modern Calculator</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Roboto', sans-serif; | |
| user-select: none; | |
| } | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .calculator { | |
| width: 320px; | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| padding: 20px; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .display { | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| text-align: right; | |
| font-size: 2.5rem; | |
| color: white; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 10px; | |
| height: 100px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| overflow: hidden; | |
| } | |
| .previous-operand { | |
| font-size: 1rem; | |
| color: rgba(255, 255, 255, 0.7); | |
| height: 20px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .current-operand { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .buttons-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 12px; | |
| } | |
| .btn { | |
| height: 60px; | |
| border: none; | |
| border-radius: 12px; | |
| font-size: 1.2rem; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| color: white; | |
| background: rgba(255, 255, 255, 0.1); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn:active { | |
| transform: scale(0.95); | |
| } | |
| .btn::after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 5px; | |
| height: 5px; | |
| background: rgba(255, 255, 255, 0.5); | |
| opacity: 0; | |
| border-radius: 100%; | |
| transform: scale(1, 1) translate(-50%); | |
| transform-origin: 50% 50%; | |
| } | |
| .btn:focus:not(:active)::after { | |
| animation: ripple 1s ease-out; | |
| } | |
| @keyframes ripple { | |
| 0% { | |
| transform: scale(0, 0); | |
| opacity: 0.5; | |
| } | |
| 100% { | |
| transform: scale(20, 20); | |
| opacity: 0; | |
| } | |
| } | |
| .btn-operation { | |
| background: rgba(255, 166, 0, 0.5); | |
| } | |
| .btn-equals { | |
| background: rgba(76, 175, 80, 0.6); | |
| } | |
| .btn-clear { | |
| background: rgba(244, 67, 54, 0.6); | |
| } | |
| .btn-delete { | |
| background: rgba(156, 39, 176, 0.6); | |
| } | |
| .span-2 { | |
| grid-column: span 2; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="calculator"> | |
| <div class="display"> | |
| <div class="previous-operand" id="previous-operand"></div> | |
| <div class="current-operand" id="current-operand">0</div> | |
| </div> | |
| <div class="buttons-grid"> | |
| <button class="btn btn-clear span-2" id="clear">AC</button> | |
| <button class="btn btn-delete" id="delete">DEL</button> | |
| <button class="btn btn-operation" id="divide">÷</button> | |
| <button class="btn" id="seven">7</button> | |
| <button class="btn" id="eight">8</button> | |
| <button class="btn" id="nine">9</button> | |
| <button class="btn btn-operation" id="multiply">×</button> | |
| <button class="btn" id="four">4</button> | |
| <button class="btn" id="five">5</button> | |
| <button class="btn" id="six">6</button> | |
| <button class="btn btn-operation" id="subtract">-</button> | |
| <button class="btn" id="one">1</button> | |
| <button class="btn" id="two">2</button> | |
| <button class="btn" id="three">3</button> | |
| <button class="btn btn-operation" id="add">+</button> | |
| <button class="btn" id="zero">0</button> | |
| <button class="btn" id="decimal">.</button> | |
| <button class="btn btn-equals span-2" id="equals">=</button> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const previousOperandElement = document.getElementById('previous-operand'); | |
| const currentOperandElement = document.getElementById('current-operand'); | |
| const numberButtons = document.querySelectorAll('.btn:not(.btn-operation):not(.btn-equals):not(.btn-clear):not(.btn-delete)'); | |
| const operationButtons = document.querySelectorAll('.btn-operation'); | |
| const equalsButton = document.getElementById('equals'); | |
| const clearButton = document.getElementById('clear'); | |
| const deleteButton = document.getElementById('delete'); | |
| class Calculator { | |
| constructor(previousOperandElement, currentOperandElement) { | |
| this.previousOperandElement = previousOperandElement; | |
| this.currentOperandElement = currentOperandElement; | |
| this.clear(); | |
| } | |
| clear() { | |
| this.currentOperand = '0'; | |
| this.previousOperand = ''; | |
| this.operation = undefined; | |
| } | |
| delete() { | |
| this.currentOperand = this.currentOperand.toString().slice(0, -1); | |
| if (this.currentOperand === '') { | |
| this.currentOperand = '0'; | |
| } | |
| } | |
| appendNumber(number) { | |
| if (number === '.' && this.currentOperand.includes('.')) return; | |
| if (this.currentOperand === '0' && number !== '.') { | |
| this.currentOperand = number.toString(); | |
| } else { | |
| this.currentOperand = this.currentOperand.toString() + number.toString(); | |
| } | |
| } | |
| chooseOperation(operation) { | |
| if (this.currentOperand === '') return; | |
| if (this.previousOperand !== '') { | |
| this.compute(); | |
| } | |
| this.operation = operation; | |
| this.previousOperand = this.currentOperand; | |
| this.currentOperand = ''; | |
| } | |
| compute() { | |
| let computation; | |
| const prev = parseFloat(this.previousOperand); | |
| const current = parseFloat(this.currentOperand); | |
| if (isNaN(prev) || isNaN(current)) return; | |
| switch (this.operation) { | |
| case '+': | |
| computation = prev + current; | |
| break; | |
| case '-': | |
| computation = prev - current; | |
| break; | |
| case '×': | |
| computation = prev * current; | |
| break; | |
| case '÷': | |
| computation = prev / current; | |
| break; | |
| default: | |
| return; | |
| } | |
| this.currentOperand = computation.toString(); | |
| this.operation = undefined; | |
| this.previousOperand = ''; | |
| } | |
| updateDisplay() { | |
| this.currentOperandElement.innerText = this.currentOperand; | |
| if (this.operation != null) { | |
| this.previousOperandElement.innerText = | |
| `${this.previousOperand} ${this.operation}`; | |
| } else { | |
| this.previousOperandElement.innerText = ''; | |
| } | |
| } | |
| } | |
| const calculator = new Calculator(previousOperandElement, currentOperandElement); | |
| numberButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| calculator.appendNumber(button.innerText); | |
| calculator.updateDisplay(); | |
| }); | |
| }); | |
| operationButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| calculator.chooseOperation(button.innerText); | |
| calculator.updateDisplay(); | |
| }); | |
| }); | |
| equalsButton.addEventListener('click', () => { | |
| calculator.compute(); | |
| calculator.updateDisplay(); | |
| }); | |
| clearButton.addEventListener('click', () => { | |
| calculator.clear(); | |
| calculator.updateDisplay(); | |
| }); | |
| deleteButton.addEventListener('click', () => { | |
| calculator.delete(); | |
| calculator.updateDisplay(); | |
| }); | |
| // Keyboard support | |
| document.addEventListener('keydown', (e) => { | |
| if ((e.key >= '0' && e.key <= '9') || e.key === '.') { | |
| calculator.appendNumber(e.key); | |
| calculator.updateDisplay(); | |
| } else if (e.key === '+' || e.key === '-' || e.key === '*' || e.key === '/') { | |
| let operation; | |
| if (e.key === '*') operation = '×'; | |
| else if (e.key === '/') operation = '÷'; | |
| else operation = e.key; | |
| calculator.chooseOperation(operation); | |
| calculator.updateDisplay(); | |
| } else if (e.key === 'Enter' || e.key === '=') { | |
| e.preventDefault(); | |
| calculator.compute(); | |
| calculator.updateDisplay(); | |
| } else if (e.key === 'Backspace') { | |
| calculator.delete(); | |
| calculator.updateDisplay(); | |
| } else if (e.key === 'Escape') { | |
| calculator.clear(); | |
| calculator.updateDisplay(); | |
| } | |
| }); | |
| // Button ripple effect | |
| const buttons = document.querySelectorAll('.btn'); | |
| buttons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| this.focus(); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> | |
| </html> |