<!
doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Calculator</title>
<style>
:root{
--bg:#0f1724;
--panel:#0b1220;
--accent:#7c3aed;
--muted:#98a0b3;
--glass: rgba(255,255,255,0.03);
--btn:#111827;
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(180deg,var(--bg),#041026);
color: #e6eef8;
padding:24px;
.calculator{
width:360px;
max-width:98vw;
background: linear-gradient(180deg,var(--panel), #071324);
border-radius:16px;
box-shadow: 0 8px 30px rgba(2,6,23,0.7), inset 0 1px 0 rgba(255,255,255,0.02);
padding:18px;
.display{
background:var(--glass);
border-radius:10px;
padding:14px 16px;
min-height:72px;
display:flex;
flex-direction:column;
justify-content:center;
margin-bottom:14px;
.prev{font-size:14px;color:var(--muted);min-height:18px;}
.curr{font-size:28px;font-weight:600;text-align:right;word-wrap:break-word}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
button{
border:0;
padding:16px 12px;
border-radius:10px;
font-size:18px;
cursor:pointer;
user-select:none;
background:var(--btn);
color:inherit;
box-shadow: 0 4px 10px rgba(2,6,23,0.6);
transition:transform .06s ease, box-shadow .06s ease, background .12s;
button:active{transform:translateY(1px)}
.btn-op{background:linear-gradient(180deg, rgba(124,58,237,0.18), rgba(124,58,237,0.05));}
.btn-equal{grid-column:span 2;background:linear-gradient(90deg,var(--accent), #3b82f6);font-
weight:700}
.btn-wide{grid-column:span 2}
.btn-ctrl{background:rgba(255,255,255,0.03);color:var(--muted)}
.footer{margin-top:12px;font-size:12px;color:var(--muted);text-align:center}
@media (max-width:420px){
.calculator{padding:12px}
button{padding:14px;font-size:16px}
.curr{font-size:24px}
</style>
</head>
<body>
<main class="calculator" aria-label="Calculator">
<section class="display" role="status" aria-live="polite">
<div class="prev" id="previous"> </div>
<div class="curr" id="current">0</div>
</section>
<section class="keys" role="group" aria-label="Calculator buttons">
<button class="btn-ctrl" data-action="clear" title="Clear (Esc)">C</button>
<button class="btn-ctrl" data-action="back" title="Backspace (Backspace)">⌫</button>
<button class="btn-ctrl" data-action="percent" title="Percent">%</button>
<button class="btn-op" data-action="/" title="Divide">÷</button>
<button data-number="7">7</button>
<button data-number="8">8</button>
<button data-number="9">9</button>
<button class="btn-op" data-action="*" title="Multiply">×</button>
<button data-number="4">4</button>
<button data-number="5">5</button>
<button data-number="6">6</button>
<button class="btn-op" data-action="-" title="Subtract">−</button>
<button data-number="1">1</button>
<button data-number="2">2</button>
<button data-number="3">3</button>
<button class="btn-op" data-action="+" title="Add">+</button>
<button data-number="0" class="btn-wide">0</button>
<button data-number="." title="Decimal point">.</button>
<button class="btn-equal" data-action="=" title="Equals (Enter)">=</button>
</section>
<div class="footer">Keyboard supported: numbers, + - * / . Enter = Backspace Esc</div>
</main>
<script>
(function(){
const prevEl = [Link]('previous');
const currEl = [Link]('current');
let prev = '';
let curr = '0';
let operator = null;
let justEvaluated = false;
function updateDisplay(){
[Link] = prev ? prev : '\u00A0';
[Link] = curr;
}
function inputNumber(n){
if(justEvaluated){ curr = '0'; justEvaluated = false; }
if(n === '.' && [Link]('.')) return;
if(curr === '0' && n !== '.') curr = n;
else curr = curr + n;
updateDisplay();
function chooseOperator(op){
if(!operator){
prev = curr + ' ' + op;
operator = op;
curr = '0';
} else {
// chain calculation: evaluate first
evaluate();
operator = op;
prev = curr + ' ' + op;
curr = '0';
justEvaluated = false;
updateDisplay();
}
function evaluate(){
if(!operator) return;
const a = parseFloat(prev);
const b = parseFloat(curr);
let res = 0;
switch(operator){
case '+': res = a + b; break;
case '-': res = a - b; break;
case '*': res = a * b; break;
case '/': res = b === 0 ? NaN : a / b; break;
default: res = NaN;
// format result
if([Link](res)){
// avoid long floating artifacts
res = parseFloat([Link](12)).toString();
} else {
res = 'Error';
prev = '';
curr = res;
operator = null;
justEvaluated = true;
updateDisplay();
}
function percent(){
let val = parseFloat(curr);
if() return;
val = val / 100;
curr = parseFloat([Link](12)).toString();
updateDisplay();
function clearAll(){ prev=''; curr='0'; operator=null; justEvaluated=false; updateDisplay(); }
function backspace(){ if(justEvaluated){ clearAll(); return; } if([Link] === 1) curr = '0'; else curr =
[Link](0,-1); updateDisplay(); }
// hook buttons
[Link]('[data-number]').forEach(btn => [Link]('click', e=>
inputNumber([Link])));
[Link]('[data-action]').forEach(btn => [Link]('click', e=>{
const a = [Link];
if(a === 'clear') clearAll();
else if(a === 'back') backspace();
else if(a === 'percent') percent();
else if(a === '=') evaluate();
else chooseOperator(a);
}));
// keyboard support
[Link]('keydown', e=>{
if([Link] >= '0' && [Link] <= '9') { inputNumber([Link]); [Link](); }
else if([Link] === '.') { inputNumber('.'); [Link](); }
else if([Link] === 'Enter' || [Link] === '=') { evaluate(); [Link](); }
else if([Link] === 'Backspace') { backspace(); [Link](); }
else if([Link] === 'Escape') { clearAll(); [Link](); }
else if(['+','-','*','/'].includes([Link])) { chooseOperator([Link]); [Link](); }
});
// friendly touch: clicking operator buttons with shown symbols map to actual operator
[Link]('.btn-op').forEach(btn=>{
[Link]('click', ()=>{
const sym = [Link]();
const map = {'÷':'/','×':'*','−':'-','+':'+'};
const op = map[sym] || [Link];
// dataset action already handled, but ensure right operator when chaining
});
});
// initialize
updateDisplay();
})();
</script>
</body>
</html>