Calculator – JavaScript Calculator with History & Dark Mode

49 0 codex Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Calculator – JavaScript Calculator with History & Dark Mode

<div class="calc" id="calc">
  <div class="top"><button class="theme" id="theme" aria-label="Theme">🌙</button><button class="hbtn" id="hbtn">History</button></div>
  <div class="screen"><div class="expr" id="expr"></div><div class="out" id="out">0</div></div>
  <div class="keys" id="keys">
    <button class="fn" data-k="C">AC</button><button class="fn" data-k="back">⌫</button><button class="fn" data-k="%">%</button><button class="op" data-k="/">÷</button>
    <button data-k="7">7</button><button data-k="8">8</button><button data-k="9">9</button><button class="op" data-k="*">×</button>
    <button data-k="4">4</button><button data-k="5">5</button><button data-k="6">6</button><button class="op" data-k="-">−</button>
    <button data-k="1">1</button><button data-k="2">2</button><button data-k="3">3</button><button class="op" data-k="+">+</button>
    <button data-k="neg">±</button><button data-k="0">0</button><button data-k=".">.</button><button class="eq" data-k="=">=</button>
  </div>
  <div class="hist" id="hist"><h3>History</h3><ul id="hl"></ul><button id="clr">Clear calcHist</button></div>
</div>

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; display: grid; place-items: center; font-family: "Segoe UI", system-ui, sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); padding: 16px; }
.calc { --bg: #1e1f2e; --key: #2b2d42; --txt: #fff; --fn: #3d405b; width: min(340px, 100%); background: var(--bg); color: var(--txt); border-radius: 30px; padding: 20px; box-shadow: 0 30px 60px rgba(0,0,0,.35); position: relative; overflow: hidden; transition: background .3s; }
.calc.light { --bg: #f4f5fb; --key: #fff; --txt: #1e1f2e; --fn: #e3e5f1; }
.top { display: flex; justify-content: space-between; }
.top button { background: var(--key); color: var(--txt); border: 0; border-radius: 99px; padding: 6px 12px; cursor: pointer; }
.screen { text-align: right; padding: 30px 6px 18px; min-height: 130px; }
.expr { opacity: .5; min-height: 1.4em; font-size: 1.1rem; word-break: break-all; }
.out { font-size: 3rem; font-weight: 300; word-break: break-all; transition: font-size .2s; }
.out.small { font-size: 2rem; }
.keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.keys button { aspect-ratio: 1; border: 0; border-radius: 22px; background: var(--key); color: var(--txt); font-size: 1.5rem; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.15); transition: transform .08s, filter .2s; }
.keys button:active, .keys button.press { transform: translateY(3px) scale(.96); box-shadow: none; }
.keys button:hover { filter: brightness(1.15); }
.keys .fn { background: var(--fn); }
.keys .op { background: #ff9f1c; color: #fff; }
.keys .op.on { background: #fff; color: #ff9f1c; }
.keys .eq { background: #2ec4b6; color: #fff; }
.hist { position: absolute; inset: 0; background: var(--bg); padding: 24px; transform: translateY(100%); transition: transform .35s; display: flex; flex-direction: column; }
.hist.on { transform: none; }
.hist ul { list-style: none; flex: 1; overflow-y: auto; margin: 14px 0; }
.hist li { padding: 10px 0; border-bottom: 1px solid var(--fn); text-align: right; cursor: pointer; }
.hist li small { display: block; opacity: .5; }
.hist button { border: 0; background: var(--fn); color: var(--txt); border-radius: 12px; padding: 12px; cursor: pointer; }

// Calculator: chained operations, percent, ±, backspace, keyboard support, calcHist and light/dark theme
var cur = '0', prev = null, op = null, fresh = false, calcHist = [];
try { calcHist = JSON.parse(localStorage.getItem('calc-history') || '[]'); } catch (e) {}
var out = document.getElementById('out'), expr = document.getElementById('expr'), SYM = { '/': '÷', '*': '×', '-': '−', '+': '+' };
function fmt(n) { if (!isFinite(n)) return 'Error'; var s = String(+parseFloat(n).toPrecision(12)); return s.length > 14 ? (+n).toExponential(6) : s; }
function calc(a, b, o) { a = +a; b = +b; return o === '+' ? a + b : o === '-' ? a - b : o === '*' ? a * b : b === 0 ? NaN : a / b; }
function show() {
  var parts = cur.split('.'); var txt = cur === 'Error' ? cur : (+parts[0]).toLocaleString('en-US') + (parts.length > 1 ? '.' + parts[1] : '');
  if (cur.startsWith('-') && parts[0] === '-0') txt = '-0' + (parts[1] !== undefined ? '.' + parts[1] : '');
  out.textContent = txt; out.classList.toggle('small', txt.length > 9);
  expr.textContent = prev !== null ? fmt(prev) + ' ' + SYM[op] : '';
  document.querySelectorAll('.op').forEach(function (b) { b.classList.toggle('on', fresh && b.dataset.k === op); });
}
function press(k) {
  if (cur === 'Error') cur = '0';
  if (/\d/.test(k)) { if (fresh || cur === '0') { cur = k; fresh = false; } else if (cur.replace(/[-.]/g, '').length < 15) cur += k; }
  else if (k === '.') { if (fresh) { cur = '0.'; fresh = false; } else if (cur.indexOf('.') < 0) cur += '.'; }
  else if (k === 'C') { cur = '0'; prev = op = null; fresh = false; }
  else if (k === 'back') { if (!fresh) cur = cur.length > 1 && cur !== '-0' ? cur.slice(0, -1).replace(/^-$/, '0') : '0'; }
  else if (k === 'neg') { cur = cur.startsWith('-') ? cur.slice(1) : (cur === '0' ? cur : '-' + cur); }
  else if (k === '%') { cur = fmt(prev !== null && (op === '+' || op === '-') ? prev * cur / 100 : cur / 100); fresh = true; }
  else if ('+-*/'.indexOf(k) > -1) { if (prev !== null && !fresh) { prev = calc(prev, cur, op); cur = fmt(prev); } else prev = +cur; op = k; fresh = true; }
  else if (k === '=') {
    if (prev === null) return show();
    var r = calc(prev, cur, op), line = fmt(prev) + ' ' + SYM[op] + ' ' + fmt(cur);
    cur = fmt(r); calcHist.unshift([line, cur]); calcHist = calcHist.slice(0, 30); saveHist();
    prev = op = null; fresh = true;
  }
  show();
}
document.getElementById('keys').addEventListener('click', function (e) { var b = e.target.closest('button'); if (b) press(b.dataset.k); });
var KEYMAP = { Enter: '=', '=': '=', Backspace: 'back', Escape: 'C', Delete: 'C', ',': '.' };
addEventListener('keydown', function (e) {
  var k = KEYMAP[e.key] || e.key; if (!/^[\d.+\-*/%=]$/.test(k) && ['back', 'C'].indexOf(k) < 0) return;
  e.preventDefault(); press(k);
  var b = document.querySelector('[data-k="' + k + '"]'); if (b) { b.classList.add('press'); setTimeout(function () { b.classList.remove('press'); }, 100); }
});
function saveHist() {
  try { localStorage.setItem('calc-history', JSON.stringify(calcHist)); } catch (e) {}
  document.getElementById('hl').innerHTML = calcHist.length ? calcHist.map(function (h, i) { return '<li data-i="' + i + '"><small>' + h[0] + ' =</small>' + h[1] + '</li>'; }).join('') : '<li>No calcHist yet</li>';
}
document.getElementById('hl').onclick = function (e) { var li = e.target.closest('li'); if (li && li.dataset.i) { cur = calcHist[+li.dataset.i][1]; fresh = true; show(); document.getElementById('hist').classList.remove('on'); } };
document.getElementById('hbtn').onclick = function () { document.getElementById('hist').classList.toggle('on'); };
document.getElementById('clr').onclick = function () { calcHist = []; saveHist(); };
document.getElementById('theme').onclick = function () { var c = document.getElementById('calc'); c.classList.toggle('light'); this.textContent = c.classList.contains('light') ? '☀️' : '🌙'; };
saveHist(); show();

Comments 0

…

Calculator – JavaScript Calculator with History & Dark Mode

Recommended

Comments 0