<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Calculator</title>
<style>
:root {
--primary: #6c5ce7;
--secondary: #a29bfe;
--dark: #2d3436;
--light: #f5f6fa;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
padding: 20px;
}
.calculator {
width: 100%;
max-width: 360px;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-radius: 20px;
box-shadow: var(--shadow);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.display {
padding: 20px;
text-align: right;
background: rgba(0, 0, 0, 0.2);
color: var(--light);
}
.display-input {
font-size: 1.2rem;
opacity: 0.7;
height: 24px;
overflow: hidden;
}
.display-output {
font-size: 2.5rem;
font-weight: bold;
margin-top: 10px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: rgba(0, 0, 0, 0.05);
}
button {
border: none;
outline: none;
padding: 20px;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.2s ease;
background: white;
color: var(--dark);
}
button:active {
transform: scale(0.95);
opacity: 0.8;
}
.btn-operator {
background: var(--secondary);
color: white;
}
.btn-equal {
background: var(--primary);
color: white;
grid-column: span 1;
}
.btn-clear {
background: #ff7675;
color: white;
}
.btn-delete {
background: #fd79a8;
color: white;
}
.btn-number {
background: white;
}
@media (max-width: 400px) {
button {
padding: 15px;
}
}
</style>
</head>
<body>
<div class="calculator">
<div class="display">
<div class="display-input" id="display-input"></div>
<div class="display-output" id="display-output">0</div>
</div>
<div class="buttons">
<button class="btn-clear" onclick="clearDisplay()">AC</button>
<button class="btn-delete" onclick="deleteLastChar()">DEL</button>
<button class="btn-operator" onclick="appendOperator('%')">%</button>
<button class="btn-operator" onclick="appendOperator('/')">/</button>
<button class="btn-number" onclick="appendNumber('7')">7</button>
<button class="btn-number" onclick="appendNumber('8')">8</button>
<button class="btn-number" onclick="appendNumber('9')">9</button>
<button class="btn-operator" onclick="appendOperator('*')">×</button>
<button class="btn-number" onclick="appendNumber('4')">4</button>
<button class="btn-number" onclick="appendNumber('5')">5</button>
<button class="btn-number" onclick="appendNumber('6')">6</button>
<button class="btn-operator" onclick="appendOperator('-')">-</button>
<button class="btn-number" onclick="appendNumber('1')">1</button>
<button class="btn-number" onclick="appendNumber('2')">2</button>
<button class="btn-number" onclick="appendNumber('3')">3</button>
<button class="btn-operator" onclick="appendOperator('+')">+</button>
<button class="btn-number" onclick="appendNumber('0')">0</button>
<button class="btn-number" onclick="appendNumber('.')">.</button>
<button class="btn-equal" onclick="calculate()" colspan="2">=</button>
</div>
</div>
<script>
const displayInput = [Link]('display-input');
const displayOutput = [Link]('display-output');
let currentInput = '0';
let previousInput = '';
let operation = null;
let resetInput = false;
function updateDisplay() {
[Link] = currentInput;
[Link] = previousInput + (operation ? ' ' + operation : '');
}
function appendNumber(number) {
if (currentInput === '0' || resetInput) {
currentInput = number;
resetInput = false;
} else {
currentInput += number;
}
updateDisplay();
}
function appendOperator(op) {
if (operation && !resetInput) {
calculate();
}
previousInput = currentInput;
operation = op;
resetInput = true;
updateDisplay();
}
function calculate() {
let computation;
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
if (isNaN(prev) || isNaN(current)) return;
switch (operation) {
case '+':
computation = prev + current;
break;
case '-':
computation = prev - current;
break;
case '*':
computation = prev * current;
break;
case '/':
computation = prev / current;
break;
case '%':
computation = prev % current;
break;
default:
return;
}
currentInput = [Link]();
operation = null;
previousInput = '';
resetInput = true;
updateDisplay();
}
function clearDisplay() {
currentInput = '0';
previousInput = '';
operation = null;
updateDisplay();
}
function deleteLastChar() {
if ([Link] <= 1) {
currentInput = '0';
} else {
currentInput = [Link](0, -1);
}
updateDisplay();
}
// Keyboard support
[Link]('keydown', (event) => {
if ([Link] >= '0' && [Link] <= '9') {
appendNumber([Link]);
} else if ([Link] === '.') {
appendNumber('.');
} else if (['+', '-', '*', '/', '%'].includes([Link])) {
appendOperator([Link]);
} else if ([Link] === 'Enter' || [Link] === '=') {
calculate();
} else if ([Link] === 'Escape') {
clearDisplay();
} else if ([Link] === 'Backspace') {
deleteLastChar();
}
});
updateDisplay();
</script>
</body>
</html>