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: 0.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>