| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Calculator</title> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); |
| |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
| |
| body { |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); |
| min-height: 100vh; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 1rem; |
| } |
| |
| .container { |
| width: 100%; |
| max-width: 28rem; |
| animation: scaleIn 0.2s ease-out; |
| } |
| |
| @keyframes scaleIn { |
| 0% { transform: scale(0.95); opacity: 0; } |
| 100% { transform: scale(1); opacity: 1; } |
| } |
| |
| @keyframes fadeIn { |
| 0% { opacity: 0; } |
| 100% { opacity: 1; } |
| } |
| |
| |
| .header { |
| text-align: center; |
| margin-bottom: 2rem; |
| } |
| |
| .title { |
| font-size: 2rem; |
| font-weight: 700; |
| background: linear-gradient(to right, #22d3ee, #c084fc, #f472b6); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| margin-bottom: 0.5rem; |
| } |
| |
| .built-with { |
| font-size: 0.75rem; |
| color: #94a3b8; |
| transition: color 0.2s; |
| } |
| |
| .built-with a { |
| color: inherit; |
| text-decoration: none; |
| } |
| |
| .built-with a:hover { |
| color: #22d3ee; |
| } |
| |
| |
| .calculator { |
| background: linear-gradient(to bottom, #1e293b, #0f172a); |
| border-radius: 1.5rem; |
| padding: 1rem; |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); |
| border: 1px solid rgba(71, 85, 105, 0.3); |
| } |
| |
| |
| .display { |
| background: linear-gradient(to bottom, #0f172a, #1e293b); |
| border-radius: 1rem; |
| padding: 1rem; |
| margin-bottom: 1rem; |
| box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); |
| border: 1px solid rgba(71, 85, 105, 0.2); |
| } |
| |
| .display-previous { |
| text-align: right; |
| font-size: 0.875rem; |
| color: #64748b; |
| margin-bottom: 0.25rem; |
| min-height: 1.25rem; |
| } |
| |
| .display-current { |
| text-align: right; |
| font-size: 2.5rem; |
| font-weight: 700; |
| color: white; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| |
| .history { |
| margin-bottom: 1rem; |
| padding: 0 0.5rem; |
| animation: fadeIn 0.3s ease-out; |
| } |
| |
| .history-items { |
| display: flex; |
| gap: 0.25rem; |
| overflow-x: auto; |
| padding-bottom: 0.5rem; |
| } |
| |
| .history-items::-webkit-scrollbar { |
| display: none; |
| } |
| |
| .history-item { |
| font-size: 0.75rem; |
| color: #64748b; |
| background: rgba(30, 41, 59, 0.5); |
| padding: 0.25rem 0.5rem; |
| border-radius: 0.5rem; |
| white-space: nowrap; |
| } |
| |
| |
| .buttons { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 0.5rem; |
| } |
| |
| .btn { |
| height: 3.5rem; |
| border-radius: 0.75rem; |
| font-weight: 600; |
| font-size: 1.125rem; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: all 0.15s ease; |
| border: none; |
| cursor: pointer; |
| } |
| |
| .btn:active { |
| transform: scale(0.95); |
| } |
| |
| .btn:hover { |
| transform: scale(1.05); |
| } |
| |
| .btn-number { |
| background: linear-gradient(to bottom, #e2e8f0, #cbd5e1); |
| color: #1e293b; |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
| } |
| |
| .btn-number:hover { |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| } |
| |
| .btn-operator { |
| background: linear-gradient(to bottom, #f97316, #ea580c); |
| color: white; |
| box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.3); |
| } |
| |
| .btn-operator:hover { |
| box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.4); |
| } |
| |
| .btn-equals { |
| background: linear-gradient(to bottom, #10b981, #059669); |
| color: white; |
| box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3); |
| } |
| |
| .btn-equals:hover { |
| box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.4); |
| } |
| |
| .btn-function { |
| background: linear-gradient(to bottom, #475569, #334155); |
| color: white; |
| box-shadow: 0 4px 6px -1px rgba(71, 85, 105, 0.3); |
| } |
| |
| .btn-function:hover { |
| box-shadow: 0 10px 15px -3px rgba(71, 85, 105, 0.4); |
| } |
| |
| .btn-wide { |
| grid-column: span 2; |
| } |
| |
| |
| .footer { |
| text-align: center; |
| color: #64748b; |
| font-size: 0.75rem; |
| margin-top: 1.5rem; |
| } |
| |
| |
| @media (min-width: 640px) { |
| .btn { |
| height: 4rem; |
| } |
| |
| .display-current { |
| font-size: 3rem; |
| } |
| |
| .buttons { |
| gap: 0.75rem; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| |
| <div class="header"> |
| <h1 class="title">Calculator</h1> |
| <p class="built-with"> |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer"> |
| Built with anycoder |
| </a> |
| </p> |
| </div> |
|
|
| |
| <div class="calculator"> |
| |
| <div class="display"> |
| <div class="display-previous" id="previousDisplay"></div> |
| <div class="display-current" id="currentDisplay">0</div> |
| </div> |
|
|
| |
| <div class="history" id="historyContainer" style="display: none;"> |
| <div class="history-items" id="historyItems"></div> |
| </div> |
|
|
| |
| <div class="buttons"> |
| <button class="btn btn-function" data-action="clear">AC</button> |
| <button class="btn btn-function" data-action="toggleSign">±</button> |
| <button class="btn btn-function" data-action="percentage">%</button> |
| <button class="btn btn-operator" data-action="divide">÷</button> |
| |
| <button class="btn btn-number" data-digit="7">7</button> |
| <button class="btn btn-number" data-digit="8">8</button> |
| <button class="btn btn-number" data-digit="9">9</button> |
| <button class="btn btn-operator" data-action="multiply">×</button> |
| |
| <button class="btn btn-number" data-digit="4">4</button> |
| <button class="btn btn-number" data-digit="5">5</button> |
| <button class="btn btn-number" data-digit="6">6</button> |
| <button class="btn btn-operator" data-action="subtract">-</button> |
| |
| <button class="btn btn-number" data-digit="1">1</button> |
| <button class="btn btn-number" data-digit="2">2</button> |
| <button class="btn btn-number" data-digit="3">3</button> |
| <button class="btn btn-operator" data-action="add">+</button> |
| |
| <button class="btn btn-number btn-wide" data-digit="0">0</button> |
| <button class="btn btn-number" data-action="decimal">.</button> |
| <button class="btn btn-equals" data-action="equals">=</button> |
| </div> |
| </div> |
|
|
| |
| <p class="footer">A beautiful calculator built with HTML, CSS & JavaScript</p> |
| </div> |
|
|
| <script> |
| |
| const state = { |
| display: '0', |
| previousValue: null, |
| operation: null, |
| waitingForOperand: false, |
| history: [] |
| }; |
| |
| |
| const currentDisplayEl = document.getElementById('currentDisplay'); |
| const previousDisplayEl = document.getElementById('previousDisplay'); |
| const historyContainer = document.getElementById('historyContainer'); |
| const historyItems = document.getElementById('historyItems'); |
| |
| |
| function updateDisplay() { |
| currentDisplayEl.textContent = state.display; |
| |
| if (state.previousValue !== null && state.operation) { |
| previousDisplayEl.textContent = `${state.previousValue} ${state.operation}`; |
| } else { |
| previousDisplayEl.textContent = ''; |
| } |
| } |
| |
| |
| function updateHistory() { |
| if (state.history.length > 0) { |
| historyContainer.style.display = 'block'; |
| historyItems.innerHTML = state.history |
| .map(item => `<span class="history-item">${item}</span>`) |
| .join(''); |
| } else { |
| historyContainer.style.display = 'none'; |
| } |
| } |
| |
| |
| function inputDigit(digit) { |
| if (state.waitingForOperand) { |
| state.display = digit; |
| state.waitingForOperand = false; |
| } else { |
| state.display = state.display === '0' ? digit : state.display + digit; |
| } |
| updateDisplay(); |
| } |
| |
| |
| function inputDecimal() { |
| if (state.waitingForOperand) { |
| state.display = '0.'; |
| state.waitingForOperand = false; |
| } else if (!state.display.includes('.')) { |
| state.display += '.'; |
| } |
| updateDisplay(); |
| } |
| |
| |
| function clear() { |
| state.display = '0'; |
| state.previousValue = null; |
| state.operation = null; |
| state.waitingForOperand = false; |
| updateDisplay(); |
| previousDisplayEl.textContent = ''; |
| } |
| |
| |
| function toggleSign() { |
| state.display = String(-parseFloat(state.display)); |
| updateDisplay(); |
| } |
| |
| |
| function percentage() { |
| state.display = String(parseFloat(state.display) / 100); |
| updateDisplay(); |
| } |
| |
| |
| function performOperation(nextOperation) { |
| const inputValue = parseFloat(state.display); |
| |
| if (state.previousValue === null) { |
| state.previousValue = inputValue; |
| } else if (state.operation) { |
| const currentValue = state.previousValue || 0; |
| let result; |
| |
| switch (state.operation) { |
| case '+': |
| result = currentValue + inputValue; |
| break; |
| case '-': |
| result = currentValue - inputValue; |
| break; |
| case '×': |
| result = currentValue * inputValue; |
| break; |
| case '÷': |
| result = currentValue / inputValue; |
| break; |
| default: |
| result = inputValue; |
| } |
| |
| state.display = String(result); |
| state.previousValue = result; |
| |
| |
| addToHistory(`${currentValue} ${state.operation} ${inputValue} = ${result}`); |
| } |
| |
| state.waitingForOperand = true; |
| state.operation = nextOperation; |
| updateDisplay(); |
| } |
| |
| |
| function calculate() { |
| if (!state.operation || state.previousValue === null) return; |
| |
| const inputValue = parseFloat(state.display); |
| let result; |
| |
| switch (state.operation) { |
| case '+': |
| result = state.previousValue + inputValue; |
| break; |
| case '-': |
| result = state.previousValue - inputValue; |
| break; |
| case '×': |
| result = state.previousValue * inputValue; |
| break; |
| case '÷': |
| result = state.previousValue / inputValue; |
| break; |
| default: |
| result = inputValue; |
| } |
| |
| addToHistory(`${state.previousValue} ${state.operation} ${inputValue} = ${result}`); |
| state.display = String(result); |
| state.previousValue = null; |
| state.operation = null; |
| state.waitingForOperand = true; |
| updateDisplay(); |
| } |
| |
| |
| function addToHistory(item) { |
| state.history = [...state.history, item].slice(-5); |
| updateHistory(); |
| } |
| |
| |
| document.querySelectorAll('.btn').forEach(button => { |
| button.addEventListener('click', () => { |
| const digit = button.dataset.digit; |
| const action = button.dataset.action; |
| |
| if (digit !== undefined) { |
| inputDigit(digit); |
| } else if (action) { |
| switch (action) { |
| case 'clear': |
| clear(); |
| break; |
| case 'toggleSign': |
| toggleSign(); |
| break; |
| case 'percentage': |
| percentage(); |
| break; |
| case 'decimal': |
| inputDecimal(); |
| break; |
| case 'add': |
| performOperation('+'); |
| break; |
| case 'subtract': |
| performOperation('-'); |
| break; |
| case 'multiply': |
| performOperation('×'); |
| break; |
| case 'divide': |
| performOperation('÷'); |
| break; |
| case 'equals': |
| calculate(); |
| break; |
| } |
| } |
| }); |
| }); |
| |
| |
| document.addEventListener('keydown', (e) => { |
| const key = e.key; |
| |
| if (key >= '0' && key <= '9') { |
| inputDigit(key); |
| } else if (key === '.') { |
| inputDecimal(); |
| } else if (key === '+') { |
| performOperation('+'); |
| } else if (key === '-') { |
| performOperation('-'); |
| } else if (key === '*') { |
| performOperation('×'); |
| } else if (key === '/') { |
| e.preventDefault(); |
| performOperation('÷'); |
| } else if (key === 'Enter' || key === '=') { |
| calculate(); |
| } else if (key === 'Escape') { |
| clear(); |
| } else if (key === 'Backspace') { |
| if (!state.waitingForOperand && state.display.length > 1) { |
| state.display = state.display.slice(0, -1); |
| } else { |
| state.display = '0'; |
| } |
| updateDisplay(); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
