Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MathMagic - Four Operations Calculator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .calculator-btn { | |
| transition: all 0.2s ease; | |
| transform: scale(1); | |
| } | |
| .calculator-btn:active { | |
| transform: scale(0.95); | |
| } | |
| .operation-btn { | |
| background: linear-gradient(135deg, #3b82f6, #1d4ed8); | |
| } | |
| .operation-btn:hover { | |
| background: linear-gradient(135deg, #1d4ed8, #3b82f6); | |
| } | |
| .equals-btn { | |
| background: linear-gradient(135deg, #10b981, #059669); | |
| } | |
| .equals-btn:hover { | |
| background: linear-gradient(135deg, #059669, #10b981); | |
| } | |
| .clear-btn { | |
| background: linear-gradient(135deg, #ef4444, #dc2626); | |
| } | |
| .clear-btn:hover { | |
| background: linear-gradient(135deg, #dc2626, #ef4444); | |
| } | |
| .history-item { | |
| transition: all 0.3s ease; | |
| } | |
| .history-item:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| transform: translateX(5px); | |
| } | |
| .display-text { | |
| text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.5; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.5; } | |
| } | |
| .pulse-animation { | |
| animation: pulse 1.5s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen flex items-center justify-center p-4"> | |
| <div class="max-w-md w-full bg-gray-800 rounded-2xl overflow-hidden shadow-2xl"> | |
| <!-- Header --> | |
| <div class="bg-gradient-to-r from-blue-600 to-purple-600 p-6 flex items-center justify-between"> | |
| <div> | |
| <h1 class="text-2xl font-bold">MathMagic</h1> | |
| <p class="text-blue-100 text-sm">Four Operations Calculator</p> | |
| </div> | |
| <div class="bg-white bg-opacity-20 p-2 rounded-full"> | |
| <i class="fas fa-calculator text-2xl"></i> | |
| </div> | |
| </div> | |
| <!-- Display --> | |
| <div class="p-6 bg-gray-700 relative"> | |
| <div class="bg-gray-800 rounded-xl p-4 min-h-24 flex flex-col justify-end"> | |
| <div id="history" class="text-gray-400 text-sm h-6 overflow-hidden whitespace-nowrap"></div> | |
| <div id="display" class="display-text text-3xl font-semibold text-right overflow-x-auto">0</div> | |
| </div> | |
| <div id="error-message" class="absolute bottom-1 right-4 text-red-400 text-sm hidden"> | |
| <i class="fas fa-exclamation-circle mr-1"></i> | |
| <span>Invalid input</span> | |
| </div> | |
| </div> | |
| <!-- Calculator Body --> | |
| <div class="grid grid-cols-4 gap-3 p-6"> | |
| <!-- First Row --> | |
| <button onclick="clearAll()" class="clear-btn calculator-btn col-span-2 py-4 rounded-xl font-bold text-white shadow-md"> | |
| <i class="fas fa-eraser mr-2"></i>Clear | |
| </button> | |
| <button onclick="backspace()" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md"> | |
| <i class="fas fa-backspace"></i> | |
| </button> | |
| <button onclick="appendOperation('/')" class="operation-btn calculator-btn py-4 rounded-xl font-bold text-white shadow-md"> | |
| <i class="fas fa-divide"></i> | |
| </button> | |
| <!-- Number Rows --> | |
| <button onclick="appendNumber('7')" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">7</button> | |
| <button onclick="appendNumber('8')" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">8</button> | |
| <button onclick="appendNumber('9')" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">9</button> | |
| <button onclick="appendOperation('*')" class="operation-btn calculator-btn py-4 rounded-xl font-bold text-white shadow-md"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <button onclick="appendNumber('4')" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">4</button> | |
| <button onclick="appendNumber('5')" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">5</button> | |
| <button onclick="appendNumber('6')" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">6</button> | |
| <button onclick="appendOperation('-')" class="operation-btn calculator-btn py-4 rounded-xl font-bold text-white shadow-md"> | |
| <i class="fas fa-minus"></i> | |
| </button> | |
| <button onclick="appendNumber('1')" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">1</button> | |
| <button onclick="appendNumber('2')" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">2</button> | |
| <button onclick="appendNumber('3')" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">3</button> | |
| <button onclick="appendOperation('+')" class="operation-btn calculator-btn py-4 rounded-xl font-bold text-white shadow-md"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| <!-- Last Row --> | |
| <button onclick="appendNumber('0')" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">0</button> | |
| <button onclick="appendDecimal()" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">.</button> | |
| <button onclick="toggleSign()" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500"> | |
| <i class="fas fa-plus-minus"></i> | |
| </button> | |
| <button onclick="calculate()" class="equals-btn calculator-btn py-4 rounded-xl font-bold text-white shadow-md"> | |
| <i class="fas fa-equals"></i> | |
| </button> | |
| </div> | |
| <!-- History Section --> | |
| <div class="bg-gray-700 p-4 border-t border-gray-600 max-h-40 overflow-y-auto"> | |
| <div class="flex items-center justify-between text-gray-400 mb-2"> | |
| <h3 class="font-medium"><i class="fas fa-history mr-2"></i>History</h3> | |
| <button onclick="clearHistory()" class="text-xs hover:text-white"> | |
| <i class="fas fa-trash-alt mr-1"></i>Clear | |
| </button> | |
| </div> | |
| <div id="history-list" class="space-y-1"> | |
| <!-- History items will be added here --> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Calculator state | |
| let currentInput = '0'; | |
| let previousInput = ''; | |
| let operation = null; | |
| let resetInput = false; | |
| let calculationHistory = []; | |
| // DOM elements | |
| const display = document.getElementById('display'); | |
| const historyDisplay = document.getElementById('history'); | |
| const historyList = document.getElementById('history-list'); | |
| const errorMessage = document.getElementById('error-message'); | |
| // Update the display | |
| function updateDisplay() { | |
| display.textContent = currentInput; | |
| historyDisplay.textContent = previousInput + (operation ? ` ${operation} ` : ''); | |
| } | |
| // Append number to current input | |
| function appendNumber(number) { | |
| if (currentInput === '0' || resetInput) { | |
| currentInput = number; | |
| resetInput = false; | |
| } else { | |
| currentInput += number; | |
| } | |
| updateDisplay(); | |
| } | |
| // Append decimal point | |
| function appendDecimal() { | |
| if (resetInput) { | |
| currentInput = '0.'; | |
| resetInput = false; | |
| } else if (!currentInput.includes('.')) { | |
| currentInput += '.'; | |
| } | |
| updateDisplay(); | |
| } | |
| // Toggle positive/negative | |
| function toggleSign() { | |
| currentInput = (parseFloat(currentInput) * -1).toString(); | |
| updateDisplay(); | |
| } | |
| // Handle operations | |
| function appendOperation(op) { | |
| // If there's a previous operation waiting, calculate it first | |
| if (operation && !resetInput) { | |
| calculate(); | |
| } | |
| previousInput = currentInput; | |
| operation = op; | |
| resetInput = true; | |
| updateDisplay(); | |
| } | |
| // Calculate the result | |
| function calculate() { | |
| hideError(); | |
| if (operation === null || resetInput) return; | |
| const prev = parseFloat(previousInput); | |
| const current = parseFloat(currentInput); | |
| if (isNaN(prev) || isNaN(current)) { | |
| showError(); | |
| return; | |
| } | |
| let result; | |
| switch (operation) { | |
| case '+': | |
| result = prev + current; | |
| break; | |
| case '-': | |
| result = prev - current; | |
| break; | |
| case '*': | |
| result = prev * current; | |
| break; | |
| case '/': | |
| if (current === 0) { | |
| showError("Can't divide by zero"); | |
| return; | |
| } | |
| result = prev / current; | |
| break; | |
| default: | |
| return; | |
| } | |
| // Add to history | |
| const historyItem = `${previousInput} ${operation} ${currentInput} = ${result}`; | |
| calculationHistory.unshift(historyItem); | |
| updateHistory(); | |
| currentInput = result.toString(); | |
| operation = null; | |
| resetInput = true; | |
| updateDisplay(); | |
| } | |
| // Clear everything | |
| function clearAll() { | |
| currentInput = '0'; | |
| previousInput = ''; | |
| operation = null; | |
| hideError(); | |
| updateDisplay(); | |
| } | |
| // Backspace function | |
| function backspace() { | |
| if (currentInput.length === 1 || (currentInput.length === 2 && currentInput.startsWith('-'))) { | |
| currentInput = '0'; | |
| } else { | |
| currentInput = currentInput.slice(0, -1); | |
| } | |
| updateDisplay(); | |
| } | |
| // Show error message | |
| function showError(message = "Invalid input") { | |
| errorMessage.querySelector('span').textContent = message; | |
| errorMessage.classList.remove('hidden'); | |
| display.classList.add('text-red-400'); | |
| setTimeout(() => { | |
| display.classList.remove('text-red-400'); | |
| }, 1000); | |
| } | |
| // Hide error message | |
| function hideError() { | |
| errorMessage.classList.add('hidden'); | |
| display.classList.remove('text-red-400'); | |
| } | |
| // Update history list | |
| function updateHistory() { | |
| historyList.innerHTML = ''; | |
| calculationHistory.slice(0, 5).forEach(item => { | |
| const historyElement = document.createElement('div'); | |
| historyElement.className = 'history-item bg-gray-600 bg-opacity-50 p-2 rounded cursor-pointer'; | |
| historyElement.textContent = item; | |
| historyElement.onclick = function() { | |
| // When clicking a history item, load the result | |
| const parts = item.split(' = '); | |
| if (parts.length === 2) { | |
| currentInput = parts[1]; | |
| resetInput = true; | |
| updateDisplay(); | |
| } | |
| }; | |
| historyList.appendChild(historyElement); | |
| }); | |
| } | |
| // Clear history | |
| function clearHistory() { | |
| calculationHistory = []; | |
| updateHistory(); | |
| // Add a temporary message | |
| const emptyMessage = document.createElement('div'); | |
| emptyMessage.className = 'text-center text-gray-400 py-2 pulse-animation'; | |
| emptyMessage.innerHTML = '<i class="fas fa-history mr-2"></i>History is empty'; | |
| historyList.appendChild(emptyMessage); | |
| setTimeout(() => { | |
| if (calculationHistory.length === 0 && historyList.contains(emptyMessage)) { | |
| historyList.removeChild(emptyMessage); | |
| } | |
| }, 2000); | |
| } | |
| // Keyboard support | |
| document.addEventListener('keydown', function(event) { | |
| if (/[0-9]/.test(event.key)) { | |
| appendNumber(event.key); | |
| } else if (event.key === '.') { | |
| appendDecimal(); | |
| } else if (event.key === '+' || event.key === '-' || event.key === '*' || event.key === '/') { | |
| appendOperation(event.key); | |
| } else if (event.key === 'Enter' || event.key === '=') { | |
| calculate(); | |
| } else if (event.key === 'Escape') { | |
| clearAll(); | |
| } else if (event.key === 'Backspace') { | |
| backspace(); | |
| } | |
| }); | |
| // Initialize | |
| updateDisplay(); | |
| clearHistory(); | |
| </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 <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=karaltan/mathcalculator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |