<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Super Calculator</title>
<style>
body { font-family: Arial; text-align: center; background: #f4f4f4; }
.calculator { width: 300px; margin: 50px auto; padding: 20px; background: white; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius: 5px; }
.display { width: 90%; padding: 10px; font-size: 1.5em; text-align: right; margin-bottom: 10px; border: 1px solid #ccc; background: #fff; min-height: 40px; }
.buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
button { padding: 15px; font-size: 1.2em; border: none; cursor: pointer; background: #28a745; color: white; border-radius: 5px; }
button.operator { background: #007bff; }
button.clear { background: #dc3545; }
button.crypto { background: #ff9800; grid-column: span 4; }
button:hover { opacity: 0.8; }
</style>
</head>
<body>
<div class="calculator">
<h2><strong>Super Cal</strong></h2>
<div class="display" id="display">0</div>
<div class="buttons">
<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button class="operator" onclick="appendValue('÷')">÷</button>
<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button class="operator" onclick="appendValue('×')">×</button>
<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
<button class="operator" onclick="appendValue('-')">−</button>
<button onclick="appendValue('0')">0</button>
<button class="clear" onclick="backspace()">⌫</button>
<button onclick="calculateResult()">=</button>
<button class="operator" onclick="appendValue('+')">+</button>
<button class="crypto" onclick="calculateCrypto()">Crypto</button>
</div>
</div>
<script>
function appendValue(value) {
const display = document.getElementById('display');
if (display.innerText === '0') display.innerText = value;
else if (display.innerText.includes('=')) {
let result = display.innerText.split('=')[1].trim();
display.innerText = result + value;
} else display.innerText += value;
}
function calculateResult() {
try {
let expression = document.getElementById('display').innerText;
expression = expression.replace(/÷/g, '/').replace(/×/g, '*');
let result = eval(expression);
document.getElementById('display').innerText = expression + ' = ' + result;
} catch (error) {
document.getElementById('display').innerText = 'Error';
}
}
function backspace() {
const display = document.getElementById('display');
if (display.innerText.length > 1) display.innerText = display.innerText.slice(0, -1);
else display.innerText = '0';
}
function calculateCrypto() {
const display = document.getElementById('display');
let amount = parseFloat(display.innerText.replace(/,/g, ''));
if (isNaN(amount)) {
display.innerText = 'Invalid Input';
return;
}
let conversionRate = 1500;
let converted = amount / conversionRate;
display.innerText = amount + ' units = ' + converted.toFixed(2) + ' USD';
}
</script>
</body>
</html>