Calculator — Keypad UI HTML CSS JS Snippet

<div class="calc">
  <div class="calc-screen">
    <div class="calc-history" id="calcHistory">&nbsp;</div>
    <div class="calc-display" id="calcDisplay">0</div>
  </div>
  <div class="calc-keys">
    <button class="calc-key fn" onclick="press('C')">AC</button>
    <button class="calc-key fn" onclick="press('±')">±</button>
    <button class="calc-key fn" onclick="press('%')">%</button>
    <button class="calc-key op" data-op="÷" onclick="press('÷')">÷</button>

    <button class="calc-key" onclick="press('7')">7</button>
    <button class="calc-key" onclick="press('8')">8</button>
    <button class="calc-key" onclick="press('9')">9</button>
    <button class="calc-key op" data-op="×" onclick="press('×')">×</button>

    <button class="calc-key" onclick="press('4')">4</button>
    <button class="calc-key" onclick="press('5')">5</button>
    <button class="calc-key" onclick="press('6')">6</button>
    <button class="calc-key op" data-op="−" onclick="press('−')">−</button>

    <button class="calc-key" onclick="press('1')">1</button>
    <button class="calc-key" onclick="press('2')">2</button>
    <button class="calc-key" onclick="press('3')">3</button>
    <button class="calc-key op" data-op="+" onclick="press('+')">+</button>

    <button class="calc-key zero" onclick="press('0')">0</button>
    <button class="calc-key" onclick="press('.')">.</button>
    <button class="calc-key eq" onclick="press('=')">=</button>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.calc{width:300px;background:#1e293b;border:1px solid #334155;border-radius:22px;padding:18px;box-shadow:0 22px 55px rgba(0,0,0,.45)}

.calc-screen{text-align:right;padding:14px 12px 18px;min-height:96px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.calc-history{font-size:14px;color:#64748b;font-weight:600;height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.calc-display{font-size:46px;font-weight:700;color:#f1f5f9;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}

.calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.calc-key{height:60px;border:none;border-radius:16px;background:#334155;color:#f1f5f9;font-size:22px;font-weight:600;cursor:pointer;font-family:inherit;transition:filter .12s,transform .06s}
.calc-key:hover{filter:brightness(1.15)}
.calc-key:active{transform:scale(.93)}
.calc-key.fn{background:#475569;color:#e2e8f0;font-size:19px}
.calc-key.op{background:#6366f1;color:#fff;font-size:24px}
.calc-key.op.active{background:#fff;color:#6366f1}
.calc-key.eq{background:#10b981;color:#fff}
.calc-key.zero{grid-column:span 2;text-align:left;padding-left:24px}

var cur = '0', prev = null, op = null, fresh = true;
var display = document.getElementById('calcDisplay');
var history = document.getElementById('calcHistory');

function fmt(n) {
  var r = Math.round(n * 1e10) / 1e10;
  if (!isFinite(r)) return 'Error';
  return String(r);
}

function refresh() {
  display.textContent = cur.length > 12 ? parseFloat(cur).toPrecision(8) : cur;
  history.innerHTML = (prev !== null && op) ? (fmt(prev) + ' ' + op) : ' ';
  document.querySelectorAll('.calc-key.op').forEach(function (b) {
    b.classList.toggle('active', op !== null && fresh && b.dataset.op === op);
  });
}

function compute() {
  var a = prev, b = parseFloat(cur), r = b;
  if (op === '+') r = a + b;
  else if (op === '−') r = a - b;
  else if (op === '×') r = a * b;
  else if (op === '÷') r = b === 0 ? NaN : a / b;
  cur = fmt(r);
  prev = isFinite(r) ? r : null;
}

function press(key) {
  if (/[0-9]/.test(key)) {
    if (fresh) { cur = key; fresh = false; }
    else { cur = cur === '0' ? key : cur + key; }
  } else if (key === '.') {
    if (fresh) { cur = '0.'; fresh = false; }
    else if (cur.indexOf('.') === -1) cur += '.';
  } else if (key === '+' || key === '−' || key === '×' || key === '÷') {
    if (op !== null && !fresh) compute();
    prev = parseFloat(cur);
    op = key;
    fresh = true;
  } else if (key === '=') {
    if (op !== null) { compute(); op = null; prev = null; fresh = true; }
  } else if (key === 'C') {
    cur = '0'; prev = null; op = null; fresh = true;
  } else if (key === '±') {
    cur = fmt(parseFloat(cur) * -1);
  } else if (key === '%') {
    cur = fmt(parseFloat(cur) / 100);
  }
  refresh();
}

document.addEventListener('keydown', function (e) {
  var k = e.key;
  if (/[0-9.]/.test(k)) press(k);
  else if (k === '+') press('+');
  else if (k === '-') press('−');
  else if (k === '*') press('×');
  else if (k === '/') { e.preventDefault(); press('÷'); }
  else if (k === 'Enter' || k === '=') press('=');
  else if (k === 'Escape') press('C');
  else if (k === '%') press('%');
});

refresh();