|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>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 { |
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); |
|
|
border-radius: 20px; |
|
|
overflow: hidden; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.calculator:hover { |
|
|
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
.display { |
|
|
min-height: 100px; |
|
|
word-wrap: break-word; |
|
|
overflow: hidden; |
|
|
} |
|
|
.btn { |
|
|
transition: all 0.2s ease; |
|
|
transform: scale(1); |
|
|
} |
|
|
.btn:active { |
|
|
transform: scale(0.95); |
|
|
} |
|
|
.btn-operator { |
|
|
background-color: #f59e0b; |
|
|
} |
|
|
.btn-function { |
|
|
background-color: #4b5563; |
|
|
} |
|
|
.btn-equals { |
|
|
background-color: #10b981; |
|
|
} |
|
|
.btn-clear { |
|
|
background-color: #ef4444; |
|
|
} |
|
|
.btn-memory { |
|
|
background-color: #7c3aed; |
|
|
} |
|
|
.btn:hover { |
|
|
opacity: 0.9; |
|
|
} |
|
|
.history-panel { |
|
|
transition: all 0.3s ease; |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
.history-panel.active { |
|
|
max-height: 200px; |
|
|
} |
|
|
@media (max-width: 640px) { |
|
|
.btn { |
|
|
padding: 0.5rem; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4"> |
|
|
<div class="calculator bg-gray-800 w-full max-w-md"> |
|
|
|
|
|
<div class="p-4"> |
|
|
<div class="bg-gray-900 rounded-lg p-4 mb-2"> |
|
|
<div class="history-panel bg-gray-800 text-gray-300 text-sm mb-2 overflow-y-auto" id="historyPanel"></div> |
|
|
<div class="display text-right text-white text-3xl font-semibold py-2 px-1" id="display">0</div> |
|
|
<div class="text-right text-gray-400 text-sm" id="operation"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-5 gap-2 p-4"> |
|
|
|
|
|
<button class="btn btn-memory text-white rounded-lg p-3 col-span-1" onclick="memoryAdd()">M+</button> |
|
|
<button class="btn btn-memory text-white rounded-lg p-3 col-span-1" onclick="memorySubtract()">M-</button> |
|
|
<button class="btn btn-memory text-white rounded-lg p-3 col-span-1" onclick="memoryRecall()">MR</button> |
|
|
<button class="btn btn-memory text-white rounded-lg p-3 col-span-1" onclick="memoryClear()">MC</button> |
|
|
<button class="btn btn-clear text-white rounded-lg p-3 col-span-1" onclick="clearAll()">AC</button> |
|
|
|
|
|
|
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('(')">(</button> |
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay(')')">)</button> |
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('%')">%</button> |
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.PI')">π</button> |
|
|
<button class="btn btn-clear text-white rounded-lg p-3 col-span-1" onclick="clearDisplay()">C</button> |
|
|
|
|
|
|
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addFunction('Math.sin(')">sin</button> |
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addFunction('Math.cos(')">cos</button> |
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addFunction('Math.tan(')">tan</button> |
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.log(')">ln</button> |
|
|
<button class="btn btn-operator text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('/')">/</button> |
|
|
|
|
|
|
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addFunction('Math.asin(')">sin⁻¹</button> |
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addFunction('Math.acos(')">cos⁻¹</button> |
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addFunction('Math.atan(')">tan⁻¹</button> |
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.log10(')">log</button> |
|
|
<button class="btn btn-operator text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('*')">×</button> |
|
|
|
|
|
|
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.sqrt(')">√</button> |
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.pow(')">x^y</button> |
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.exp(')">e^x</button> |
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="factorial()">x!</button> |
|
|
<button class="btn btn-operator text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('-')">-</button> |
|
|
|
|
|
|
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.abs(')">|x|</button> |
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.floor(')">floor</button> |
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.ceil(')">ceil</button> |
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.round(')">round</button> |
|
|
<button class="btn btn-operator text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('+')">+</button> |
|
|
|
|
|
|
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.random()')">rand</button> |
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.E')">e</button> |
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('10^')">10^x</button> |
|
|
<button class="btn btn-function text-white rounded-lg p-3 col-span-1" onclick="toggleHistory()"> |
|
|
<i class="fas fa-history"></i> |
|
|
</button> |
|
|
<button class="btn btn-equals text-white rounded-lg p-3 col-span-1" onclick="calculate()">=</button> |
|
|
|
|
|
|
|
|
<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('7')">7</button> |
|
|
<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('8')">8</button> |
|
|
<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('9')">9</button> |
|
|
<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('4')">4</button> |
|
|
<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('5')">5</button> |
|
|
<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('6')">6</button> |
|
|
<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('1')">1</button> |
|
|
<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('2')">2</button> |
|
|
<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('3')">3</button> |
|
|
<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-2" onclick="addToDisplay('0')">0</button> |
|
|
<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('.')">.</button> |
|
|
<button class="btn bg-gray-700 text-white rounded-lg p-3 col-span-1" onclick="addToDisplay('Math.pow(10,')">EE</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let currentDisplay = '0'; |
|
|
let operationDisplay = ''; |
|
|
let memoryValue = 0; |
|
|
let history = []; |
|
|
let isHistoryVisible = false; |
|
|
|
|
|
|
|
|
const displayElement = document.getElementById('display'); |
|
|
const operationElement = document.getElementById('operation'); |
|
|
const historyPanel = document.getElementById('historyPanel'); |
|
|
|
|
|
|
|
|
updateDisplay(); |
|
|
|
|
|
|
|
|
function updateDisplay() { |
|
|
displayElement.textContent = currentDisplay; |
|
|
operationElement.textContent = operationDisplay; |
|
|
} |
|
|
|
|
|
|
|
|
function addToDisplay(value) { |
|
|
if (currentDisplay === '0' && value !== '.') { |
|
|
currentDisplay = value; |
|
|
} else { |
|
|
currentDisplay += value; |
|
|
} |
|
|
updateDisplay(); |
|
|
} |
|
|
|
|
|
|
|
|
function addFunction(func) { |
|
|
currentDisplay += func; |
|
|
updateDisplay(); |
|
|
} |
|
|
|
|
|
|
|
|
function clearDisplay() { |
|
|
currentDisplay = '0'; |
|
|
operationDisplay = ''; |
|
|
updateDisplay(); |
|
|
} |
|
|
|
|
|
|
|
|
function clearAll() { |
|
|
currentDisplay = '0'; |
|
|
operationDisplay = ''; |
|
|
memoryValue = 0; |
|
|
updateDisplay(); |
|
|
} |
|
|
|
|
|
|
|
|
function calculate() { |
|
|
try { |
|
|
|
|
|
const operation = currentDisplay; |
|
|
|
|
|
|
|
|
let result = eval(currentDisplay); |
|
|
|
|
|
|
|
|
if (Math.abs(result) > 1e12 || (Math.abs(result) < 1e-4 && result !== 0)) { |
|
|
result = result.toExponential(6); |
|
|
} else if (Number.isInteger(result)) { |
|
|
result = result.toString(); |
|
|
} else { |
|
|
|
|
|
result = parseFloat(result.toFixed(10)).toString(); |
|
|
} |
|
|
|
|
|
|
|
|
operationDisplay = operation + ' ='; |
|
|
currentDisplay = result; |
|
|
updateDisplay(); |
|
|
|
|
|
|
|
|
addToHistory(operation, result); |
|
|
} catch (error) { |
|
|
currentDisplay = 'Error'; |
|
|
updateDisplay(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function addToHistory(operation, result) { |
|
|
history.unshift({ operation, result }); |
|
|
if (history.length > 5) { |
|
|
history.pop(); |
|
|
} |
|
|
updateHistoryPanel(); |
|
|
} |
|
|
|
|
|
|
|
|
function updateHistoryPanel() { |
|
|
historyPanel.innerHTML = history.map(item => |
|
|
`<div class="py-1 border-b border-gray-700"> |
|
|
<div class="text-gray-400">${item.operation} =</div> |
|
|
<div class="text-white">${item.result}</div> |
|
|
</div>` |
|
|
).join(''); |
|
|
} |
|
|
|
|
|
|
|
|
function toggleHistory() { |
|
|
isHistoryVisible = !isHistoryVisible; |
|
|
if (isHistoryVisible) { |
|
|
historyPanel.classList.add('active'); |
|
|
historyPanel.classList.remove('max-h-0'); |
|
|
historyPanel.classList.add('max-h-48'); |
|
|
} else { |
|
|
historyPanel.classList.remove('active'); |
|
|
historyPanel.classList.remove('max-h-48'); |
|
|
historyPanel.classList.add('max-h-0'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function memoryAdd() { |
|
|
try { |
|
|
memoryValue += parseFloat(eval(currentDisplay)); |
|
|
} catch (error) { |
|
|
currentDisplay = 'Error'; |
|
|
updateDisplay(); |
|
|
} |
|
|
} |
|
|
|
|
|
function memorySubtract() { |
|
|
try { |
|
|
memoryValue -= parseFloat(eval(currentDisplay)); |
|
|
} catch (error) { |
|
|
currentDisplay = 'Error'; |
|
|
updateDisplay(); |
|
|
} |
|
|
} |
|
|
|
|
|
function memoryRecall() { |
|
|
currentDisplay = memoryValue.toString(); |
|
|
updateDisplay(); |
|
|
} |
|
|
|
|
|
function memoryClear() { |
|
|
memoryValue = 0; |
|
|
} |
|
|
|
|
|
|
|
|
function factorial() { |
|
|
try { |
|
|
const num = parseInt(eval(currentDisplay)); |
|
|
if (num < 0) { |
|
|
currentDisplay = 'Error'; |
|
|
} else if (num === 0 || num === 1) { |
|
|
currentDisplay = '1'; |
|
|
} else { |
|
|
let result = 1; |
|
|
for (let i = 2; i <= num; i++) { |
|
|
result *= i; |
|
|
} |
|
|
currentDisplay = result.toString(); |
|
|
} |
|
|
updateDisplay(); |
|
|
} catch (error) { |
|
|
currentDisplay = 'Error'; |
|
|
updateDisplay(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('keydown', function(event) { |
|
|
const key = event.key; |
|
|
|
|
|
|
|
|
if (/[0-9]/.test(key)) { |
|
|
addToDisplay(key); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
if (['+', '-', '*', '/', '%', '(', ')', '.'].includes(key)) { |
|
|
addToDisplay(key); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
switch (key) { |
|
|
case 'Enter': |
|
|
calculate(); |
|
|
break; |
|
|
case 'Escape': |
|
|
clearAll(); |
|
|
break; |
|
|
case 'Backspace': |
|
|
currentDisplay = currentDisplay.slice(0, -1) || '0'; |
|
|
updateDisplay(); |
|
|
break; |
|
|
case '^': |
|
|
addToDisplay('Math.pow('); |
|
|
break; |
|
|
case '!': |
|
|
factorial(); |
|
|
break; |
|
|
} |
|
|
}); |
|
|
</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=Baruka6/tom-svolt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
