Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SciCalc - Scientific 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); | |
| } | |
| .display-text { | |
| word-wrap: break-word; | |
| overflow-wrap: break-word; | |
| } | |
| .secondary-functions { | |
| display: none; | |
| } | |
| .secondary-functions.active { | |
| display: grid; | |
| } | |
| .history-panel { | |
| transform: translateX(100%); | |
| transition: transform 0.3s ease; | |
| } | |
| .history-panel.active { | |
| transform: translateX(0); | |
| } | |
| @media (max-width: 640px) { | |
| .calculator-btn { | |
| padding: 0.75rem 0.5rem; | |
| font-size: 1rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen flex items-center justify-center p-4"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="bg-white rounded-2xl shadow-xl overflow-hidden"> | |
| <!-- Display Area --> | |
| <div class="bg-gray-800 p-4 text-right"> | |
| <div class="text-gray-400 text-sm h-6 overflow-hidden" id="history-display"></div> | |
| <div class="text-white text-3xl font-semibold mt-2 h-12 overflow-hidden display-text" id="display">0</div> | |
| </div> | |
| <!-- Main Buttons --> | |
| <div class="grid grid-cols-5 gap-2 p-4 bg-gray-100"> | |
| <!-- Secondary function toggle --> | |
| <button onclick="toggleSecondaryFunctions()" class="calculator-btn bg-blue-500 hover:bg-blue-600 text-white rounded-lg p-3 col-span-1 flex items-center justify-center"> | |
| <i class="fas fa-sliders-h"></i> | |
| </button> | |
| <!-- History button --> | |
| <button onclick="toggleHistory()" class="calculator-btn bg-blue-500 hover:bg-blue-600 text-white rounded-lg p-3 col-span-1 flex items-center justify-center"> | |
| <i class="fas fa-history"></i> | |
| </button> | |
| <!-- Clear button --> | |
| <button onclick="clearDisplay()" class="calculator-btn bg-red-500 hover:bg-red-600 text-white rounded-lg p-3 col-span-1"> | |
| AC | |
| </button> | |
| <!-- Backspace --> | |
| <button onclick="backspace()" class="calculator-btn bg-gray-300 hover:bg-gray-400 text-gray-800 rounded-lg p-3 col-span-1"> | |
| <i class="fas fa-backspace"></i> | |
| </button> | |
| <!-- Division --> | |
| <button onclick="appendToDisplay('/')" class="calculator-btn bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg p-3 col-span-1"> | |
| ÷ | |
| </button> | |
| <!-- Secondary Functions (Hidden by default) --> | |
| <div class="secondary-functions col-span-5 grid grid-cols-5 gap-2 mb-2"> | |
| <button onclick="appendToDisplay('Math.sin(')" class="calculator-btn bg-purple-100 hover:bg-purple-200 text-purple-800 rounded-lg p-2 text-sm"> | |
| sin | |
| </button> | |
| <button onclick="appendToDisplay('Math.cos(')" class="calculator-btn bg-purple-100 hover:bg-purple-200 text-purple-800 rounded-lg p-2 text-sm"> | |
| cos | |
| </button> | |
| <button onclick="appendToDisplay('Math.tan(')" class="calculator-btn bg-purple-100 hover:bg-purple-200 text-purple-800 rounded-lg p-2 text-sm"> | |
| tan | |
| </button> | |
| <button onclick="appendToDisplay('Math.log(')" class="calculator-btn bg-purple-100 hover:bg-purple-200 text-purple-800 rounded-lg p-2 text-sm"> | |
| log | |
| </button> | |
| <button onclick="appendToDisplay('Math.log10(')" class="calculator-btn bg-purple-100 hover:bg-purple-200 text-purple-800 rounded-lg p-2 text-sm"> | |
| log10 | |
| </button> | |
| <button onclick="appendToDisplay('Math.asin(')" class="calculator-btn bg-purple-100 hover:bg-purple-200 text-purple-800 rounded-lg p-2 text-sm"> | |
| sin⁻¹ | |
| </button> | |
| <button onclick="appendToDisplay('Math.acos(')" class="calculator-btn bg-purple-100 hover:bg-purple-200 text-purple-800 rounded-lg p-2 text-sm"> | |
| cos⁻¹ | |
| </button> | |
| <button onclick="appendToDisplay('Math.atan(')" class="calculator-btn bg-purple-100 hover:bg-purple-200 text-purple-800 rounded-lg p-2 text-sm"> | |
| tan⁻¹ | |
| </button> | |
| <button onclick="appendToDisplay('Math.sqrt(')" class="calculator-btn bg-purple-100 hover:bg-purple-200 text-purple-800 rounded-lg p-2 text-sm"> | |
| √ | |
| </button> | |
| <button onclick="appendToDisplay('Math.pow(')" class="calculator-btn bg-purple-100 hover:bg-purple-200 text-purple-800 rounded-lg p-2 text-sm"> | |
| x^y | |
| </button> | |
| <button onclick="appendToDisplay('Math.PI')" class="calculator-btn bg-purple-100 hover:bg-purple-200 text-purple-800 rounded-lg p-2 text-sm"> | |
| π | |
| </button> | |
| <button onclick="appendToDisplay('Math.E')" class="calculator-btn bg-purple-100 hover:bg-purple-200 text-purple-800 rounded-lg p-2 text-sm"> | |
| e | |
| </button> | |
| <button onclick="appendToDisplay('(')" class="calculator-btn bg-purple-100 hover:bg-purple-200 text-purple-800 rounded-lg p-2 text-sm"> | |
| ( | |
| </button> | |
| <button onclick="appendToDisplay(')')" class="calculator-btn bg-purple-100 hover:bg-purple-200 text-purple-800 rounded-lg p-2 text-sm"> | |
| ) | |
| </button> | |
| <button onclick="appendToDisplay('factorial(')" class="calculator-btn bg-purple-100 hover:bg-purple-200 text-purple-800 rounded-lg p-2 text-sm"> | |
| n! | |
| </button> | |
| </div> | |
| <!-- Number pad --> | |
| <button onclick="appendToDisplay('7')" class="calculator-btn bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg p-3 col-span-1"> | |
| 7 | |
| </button> | |
| <button onclick="appendToDisplay('8')" class="calculator-btn bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg p-3 col-span-1"> | |
| 8 | |
| </button> | |
| <button onclick="appendToDisplay('9')" class="calculator-btn bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg p-3 col-span-1"> | |
| 9 | |
| </button> | |
| <button onclick="appendToDisplay('*')" class="calculator-btn bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg p-3 col-span-1"> | |
| × | |
| </button> | |
| <button onclick="appendToDisplay('%')" class="calculator-btn bg-gray-300 hover:bg-gray-400 text-gray-800 rounded-lg p-3 col-span-1"> | |
| % | |
| </button> | |
| <button onclick="appendToDisplay('4')" class="calculator-btn bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg p-3 col-span-1"> | |
| 4 | |
| </button> | |
| <button onclick="appendToDisplay('5')" class="calculator-btn bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg p-3 col-span-1"> | |
| 5 | |
| </button> | |
| <button onclick="appendToDisplay('6')" class="calculator-btn bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg p-3 col-span-1"> | |
| 6 | |
| </button> | |
| <button onclick="appendToDisplay('-')" class="calculator-btn bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg p-3 col-span-1"> | |
| − | |
| </button> | |
| <button onclick="appendToDisplay('Math.pow(10,')" class="calculator-btn bg-gray-300 hover:bg-gray-400 text-gray-800 rounded-lg p-3 col-span-1"> | |
| 10^x | |
| </button> | |
| <button onclick="appendToDisplay('1')" class="calculator-btn bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg p-3 col-span-1"> | |
| 1 | |
| </button> | |
| <button onclick="appendToDisplay('2')" class="calculator-btn bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg p-3 col-span-1"> | |
| 2 | |
| </button> | |
| <button onclick="appendToDisplay('3')" class="calculator-btn bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg p-3 col-span-1"> | |
| 3 | |
| </button> | |
| <button onclick="appendToDisplay('+')" class="calculator-btn bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg p-3 col-span-1"> | |
| + | |
| </button> | |
| <button onclick="appendToDisplay('Math.pow(')" class="calculator-btn bg-gray-300 hover:bg-gray-400 text-gray-800 rounded-lg p-3 col-span-1"> | |
| x^y | |
| </button> | |
| <button onclick="appendToDisplay('0')" class="calculator-btn bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg p-3 col-span-2"> | |
| 0 | |
| </button> | |
| <button onclick="appendToDisplay('.')" class="calculator-btn bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg p-3 col-span-1"> | |
| . | |
| </button> | |
| <button onclick="calculate()" class="calculator-btn bg-green-500 hover:bg-green-600 text-white rounded-lg p-3 col-span-2"> | |
| = | |
| </button> | |
| </div> | |
| </div> | |
| <!-- History Panel --> | |
| <div class="history-panel absolute top-0 right-0 h-full w-64 bg-white shadow-lg rounded-r-2xl p-4 overflow-y-auto"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold">Calculation History</h3> | |
| <button onclick="toggleHistory()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="border-b mb-2"></div> | |
| <div id="history-list" class="space-y-2"> | |
| <!-- History items will be added here --> | |
| </div> | |
| <button onclick="clearHistory()" class="mt-4 w-full bg-red-500 hover:bg-red-600 text-white py-2 rounded-lg"> | |
| Clear History | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Calculator state | |
| let currentDisplay = '0'; | |
| let calculationHistory = []; | |
| let secondaryFunctionsActive = false; | |
| // DOM elements | |
| const display = document.getElementById('display'); | |
| const historyDisplay = document.getElementById('history-display'); | |
| const historyList = document.getElementById('history-list'); | |
| // Initialize | |
| updateDisplay(); | |
| // Functions | |
| function appendToDisplay(value) { | |
| if (currentDisplay === '0' && value !== '.') { | |
| currentDisplay = value; | |
| } else { | |
| currentDisplay += value; | |
| } | |
| updateDisplay(); | |
| } | |
| function clearDisplay() { | |
| currentDisplay = '0'; | |
| updateDisplay(); | |
| } | |
| function backspace() { | |
| if (currentDisplay.length === 1) { | |
| currentDisplay = '0'; | |
| } else { | |
| currentDisplay = currentDisplay.slice(0, -1); | |
| } | |
| updateDisplay(); | |
| } | |
| function calculate() { | |
| try { | |
| // Replace display symbols with JavaScript equivalents | |
| let expression = currentDisplay | |
| .replace(/×/g, '*') | |
| .replace(/÷/g, '/') | |
| .replace(/−/g, '-'); | |
| // Special handling for factorial | |
| expression = expression.replace(/factorial\((\d+)\)/g, (match, num) => { | |
| return factorial(parseInt(num)); | |
| }); | |
| // Evaluate the expression | |
| const result = eval(expression); | |
| // Add to history | |
| const historyItem = { | |
| expression: currentDisplay, | |
| result: result | |
| }; | |
| calculationHistory.unshift(historyItem); | |
| updateHistory(); | |
| // Update display with result | |
| currentDisplay = result.toString(); | |
| updateDisplay(); | |
| } catch (error) { | |
| currentDisplay = 'Error'; | |
| updateDisplay(); | |
| setTimeout(clearDisplay, 1000); | |
| } | |
| } | |
| function factorial(n) { | |
| if (n < 0) return NaN; | |
| if (n === 0 || n === 1) return 1; | |
| let result = 1; | |
| for (let i = 2; i <= n; i++) { | |
| result *= i; | |
| } | |
| return result; | |
| } | |
| function updateDisplay() { | |
| display.textContent = currentDisplay; | |
| historyDisplay.textContent = currentDisplay === '0' ? '' : currentDisplay; | |
| } | |
| function toggleSecondaryFunctions() { | |
| const secondaryFuncs = document.querySelector('.secondary-functions'); | |
| secondaryFuncs.classList.toggle('active'); | |
| secondaryFunctionsActive = !secondaryFunctionsActive; | |
| } | |
| function toggleHistory() { | |
| const historyPanel = document.querySelector('.history-panel'); | |
| historyPanel.classList.toggle('active'); | |
| } | |
| function updateHistory() { | |
| historyList.innerHTML = ''; | |
| calculationHistory.forEach(item => { | |
| const historyElement = document.createElement('div'); | |
| historyElement.className = 'p-2 bg-gray-100 rounded-lg'; | |
| historyElement.innerHTML = ` | |
| <div class="text-sm text-gray-600">${item.expression}</div> | |
| <div class="font-semibold">= ${item.result}</div> | |
| `; | |
| historyElement.addEventListener('click', () => { | |
| currentDisplay = item.expression; | |
| updateDisplay(); | |
| toggleHistory(); | |
| }); | |
| historyList.appendChild(historyElement); | |
| }); | |
| } | |
| function clearHistory() { | |
| calculationHistory = []; | |
| updateHistory(); | |
| } | |
| // Keyboard support | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key >= '0' && e.key <= '9') { | |
| appendToDisplay(e.key); | |
| } else if (e.key === '.') { | |
| appendToDisplay('.'); | |
| } else if (e.key === '+' || e.key === '-' || e.key === '*' || e.key === '/') { | |
| appendToDisplay(e.key); | |
| } else if (e.key === 'Enter') { | |
| calculate(); | |
| } else if (e.key === 'Escape') { | |
| clearDisplay(); | |
| } else if (e.key === 'Backspace') { | |
| backspace(); | |
| } else if (e.key === '(' || e.key === ')') { | |
| appendToDisplay(e.key); | |
| } | |
| }); | |
| </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=mbuguan/vibe-coders" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |