Four-operation calculator

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>My code example</title>
<style>
:root{font-family:system-ui,sans-serif;color:#18223b}*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;background:#edf1ff;display:grid;place-items:center}main{width:min(100%,480px);background:white;border-radius:20px;padding:24px}h1{font-size:24px;margin:0 0 16px}button,input{font:inherit}button{min-height:44px;border:1px solid #afbddd;border-radius:10px;padding:10px 14px;background:#eff3ff;color:#18223b;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #3658bf;outline-offset:3px}p{line-height:1.65}button:disabled{opacity:.5;cursor:default}output{display:block;text-align:right;font-size:32px;overflow-wrap:anywhere;padding:12px;background:#f1f3fa;border-radius:8px}.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}#calc-status{min-height:24px;margin:8px 0}
</style>
</head>
<body>
<main class="calculator"><h1>Little calculator</h1><output id="display" aria-label="Calculator result">0</output><p id="calc-status" role="status"></p><div class="keys"><button type="button" data-key="C" aria-label="Clear all">C</button><button type="button" data-key="CE" aria-label="Clear entry">CE</button><button type="button" data-key="sign" aria-label="Change sign">±</button><button type="button" data-key="%" aria-label="Percent">%</button><button type="button" data-key="7">7</button><button type="button" data-key="8">8</button><button type="button" data-key="9">9</button><button type="button" data-key="/" aria-label="Divide">÷</button><button type="button" data-key="4">4</button><button type="button" data-key="5">5</button><button type="button" data-key="6">6</button><button type="button" data-key="*" aria-label="Multiply">×</button><button type="button" data-key="1">1</button><button type="button" data-key="2">2</button><button type="button" data-key="3">3</button><button type="button" data-key="-" aria-label="Subtract">-</button><button type="button" data-key="0">0</button><button type="button" data-key="." aria-label="Decimal point">.</button><button type="button" data-key="=" aria-label="Equals">=</button><button type="button" data-key="+" aria-label="Add">+</button></div><p>Percent divides the current entry by 100. Enter =, Escape = clear, Backspace = clear entry.</p></main>
<script>
let entry="0",stored=null,operator=null,fresh=false;
const display=document.querySelector("#display"),status=document.querySelector("#calc-status");
function render(){display.textContent=entry;}
function clear(){entry="0";stored=null;operator=null;fresh=false;status.textContent="";}
function calculate(a,b,op){if(op==="/"&&b===0)throw new Error("Cannot divide by zero. Clear or enter another number.");const n=op==="+"?a+b:op==="-"?a-b:op==="*"?a*b:a/b;if(!Number.isFinite(n))throw new Error("Result is outside the supported range.");return Number(n.toPrecision(12));}
function input(key){try{status.textContent="";
 if(/^[0-9]$/.test(key)){if(fresh){entry=key;fresh=false;}else if(entry.length<16)entry=entry==="0"?key:entry+key;}
 else if(key==="."){if(fresh){entry="0.";fresh=false;}else if(!entry.includes("."))entry+=".";}
 else if(key==="C")clear();
 else if(key==="CE"){entry="0";fresh=false;}
 else if(key==="sign")entry=String(-Number(entry));
 else if(key==="%")entry=String(Number(entry)/100);
 else if(["+","-","*","/"].includes(key)){if(operator&&!fresh)entry=String(calculate(stored,Number(entry),operator));stored=Number(entry);operator=key;fresh=true;}
 else if(key==="="&&operator){entry=String(calculate(stored,Number(entry),operator));stored=null;operator=null;fresh=true;}
 render();}catch(e){clear();status.textContent=e.message;render();}}
document.querySelectorAll("[data-key]").forEach(b=>b.addEventListener("click",()=>input(b.dataset.key)));
document.addEventListener("keydown",e=>{const key=e.key==="Enter"?"=":e.key==="Escape"?"C":e.key==="Backspace"?"CE":e.key;if(/^[0-9.+*/=-]$/.test(key)||["C","CE","%"].includes(key)){e.preventDefault();input(key);}});

</script>
</body>
</html>