body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
margin: 0;
padding: 20px;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.calculator {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 30px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
max-width: 350px;
width: 100%;
}

.display {
background: rgba(0, 0, 0, 0.2);
border-radius: 15px;
padding: 20px;
margin-bottom: 20px;
text-align: right;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.display input {
background: transparent;
border: none;
color: white;
font-size: 28px;
font-weight: bold;
text-align: right;
width: 100%;
outline: none;
font-family: ‘Courier New’, monospace;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}

button {
padding: 20px;
border: none;
border-radius: 15px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
}

button:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

button:active {
transform: translateY(0);
}

.operator {
background: rgba(255, 107, 107, 0.3);
}

.operator:hover {
background: rgba(255, 107, 107, 0.5);
}

.equals {
background: rgba(72, 187, 120, 0.3);
}

.equals:hover {
background: rgba(72, 187, 120, 0.5);
}

.clear {
background: rgba(255, 165, 0, 0.3);
}

.clear:hover {
background: rgba(255, 165, 0, 0.5);
}

.zero {
grid-column: span 2;
}

h1 {
text-align: center;
color: white;
margin-bottom: 30px;
font-size: 24px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

let display = document.getElementById(‘display’);
let currentInput = ‘0’;
let shouldResetDisplay = false;

function updateDisplay() {
display.value = currentInput;
}

function clearDisplay() {
currentInput = ‘0’;
shouldResetDisplay = false;
updateDisplay();
}

function deleteLast() {
if (currentInput.length > 1) {
currentInput = currentInput.slice(0, -1);
} else {
currentInput = ‘0’;
}
updateDisplay();
}

function appendToDisplay(value) {
if (shouldResetDisplay) {
currentInput = ‘0’;
shouldResetDisplay = false;
}

if (currentInput === ‘0’ && value !== ‘.’) {
currentInput = value;
} else {
// Prevent multiple decimal points
if (value === ‘.’ && currentInput.includes(‘.’)) {
return;
}

// Prevent multiple operators in a row
const operators = [‘+’, ‘-‘, ‘*’, ‘/’];
const lastChar = currentInput.slice(-1);
if (operators.includes(value) && operators.includes(lastChar)) {
currentInput = currentInput.slice(0, -1) + value;
} else {
currentInput += value;
}
}
updateDisplay();
}

function calculate() {
try {
// Replace × with * for calculation
let expression = currentInput.replace(/×/g, ‘*’);

// Basic validation
if (expression === ”) {
return;
}

// Evaluate the expression
let result = eval(expression);

// Handle division by zero and other errors
if (!isFinite(result)) {
currentInput = ‘Error’;
} else {
// Format the result to avoid floating point issues
currentInput = parseFloat(result.toFixed(10)).toString();
}

shouldResetDisplay = true;
updateDisplay();
} catch (error) {
currentInput = ‘Error’;
shouldResetDisplay = true;
updateDisplay();
}
}

// Keyboard support
document.addEventListener(‘keydown’, function(event) {
const key = event.key;

if (key >= ‘0’ && key <= '9') {
appendToDisplay(key);
} else if (key === '.') {
appendToDisplay('.');
} else if (key === '+') {
appendToDisplay('+');
} else if (key === '-') {
appendToDisplay('-');
} else if (key === '*') {
appendToDisplay('*');
} else if (key === '/') {
event.preventDefault();
appendToDisplay('/');
} else if (key === 'Enter' || key === '=') {
event.preventDefault();
calculate();
} else if (key === 'Escape' || key === 'c' || key === 'C') {
clearDisplay();
} else if (key === 'Backspace') {
event.preventDefault();
deleteLast();
}
});