Percentage Change Calculator — Free HTML CSS JS Snippet

<div class="wrap">
  <h2>Percentage Calculator</h2>

  <div class="tabs">
    <button class="tab active" data-tab="change">% Change</button>
    <button class="tab" data-tab="of">X% of Y</button>
    <button class="tab" data-tab="whatpercent">X is what % of Y</button>
  </div>

  <div class="panel active" id="panel-change">
    <div class="row">
      <div class="field"><label>Old value</label><input type="number" id="c-old" value="80" /></div>
      <div class="field"><label>New value</label><input type="number" id="c-new" value="100" /></div>
    </div>
    <div class="result" id="c-result"></div>
  </div>

  <div class="panel" id="panel-of">
    <div class="row">
      <div class="field"><label>Percentage</label><input type="number" id="o-pct" value="15" /></div>
      <div class="field"><label>of value</label><input type="number" id="o-val" value="240" /></div>
    </div>
    <div class="result" id="o-result"></div>
  </div>

  <div class="panel" id="panel-whatpercent">
    <div class="row">
      <div class="field"><label>Value X</label><input type="number" id="w-x" value="45" /></div>
      <div class="field"><label>of value Y</label><input type="number" id="w-y" value="180" /></div>
    </div>
    <div class="result" id="w-result"></div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f8fafc; min-height: 100vh; padding: 28px 20px; }

.wrap { max-width: 480px; margin: 0 auto; }
h2 { font-size: 18px; font-weight: 800; color: #1e293b; margin-bottom: 16px; }

.tabs { display: flex; gap: 4px; background: #e2e8f0; border-radius: 10px; padding: 4px; margin-bottom: 18px; }
.tab { flex: 1; padding: 8px 4px; border: none; background: none; border-radius: 8px; font-size: 11.5px; font-weight: 700; color: #64748b; cursor: pointer; }
.tab.active { background: #fff; color: #1e293b; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.panel { display: none; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; }
.panel.active { display: block; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field label { display: block; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.field input {
  width: 100%; padding: 10px 12px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: 15px; font-family: "SF Mono", Consolas, monospace; color: #1e293b;
}
.field input:focus { outline: none; border-color: #6366f1; }

.result { margin-top: 16px; padding: 16px; border-radius: 10px; background: #eef2ff; text-align: center; }
.result .big { font-size: 28px; font-weight: 800; color: #4338ca; }
.result .sub { font-size: 12px; color: #64748b; margin-top: 4px; }
.result.negative .big { color: #dc2626; }
.result.positive .big { color: #16a34a; }

function fmt(n) {
  if (!isFinite(n)) return '—';
  const rounded = Math.round(n * 100) / 100;
  return rounded.toLocaleString(undefined, { maximumFractionDigits: 2 });
}

const cOld = document.getElementById('c-old');
const cNew = document.getElementById('c-new');
const cResult = document.getElementById('c-result');

function renderChange() {
  const oldV = parseFloat(cOld.value);
  const newV = parseFloat(cNew.value);
  if (isNaN(oldV) || isNaN(newV) || oldV === 0) {
    cResult.className = 'result';
    cResult.innerHTML = '<div class="big">—</div><div class="sub">Old value cannot be zero</div>';
    return;
  }
  const diff = newV - oldV;
  const pct = (diff / Math.abs(oldV)) * 100;
  cResult.className = 'result ' + (pct > 0 ? 'positive' : pct < 0 ? 'negative' : '');
  cResult.innerHTML =
    '<div class="big">' + (pct > 0 ? '+' : '') + fmt(pct) + '%</div>' +
    '<div class="sub">' + fmt(oldV) + ' \u2192 ' + fmt(newV) + ' (' + (diff > 0 ? '+' : '') + fmt(diff) + ')</div>';
}

const oPct = document.getElementById('o-pct');
const oVal = document.getElementById('o-val');
const oResult = document.getElementById('o-result');

function renderOf() {
  const pct = parseFloat(oPct.value);
  const val = parseFloat(oVal.value);
  if (isNaN(pct) || isNaN(val)) {
    oResult.className = 'result';
    oResult.innerHTML = '<div class="big">—</div><div class="sub">Enter both values</div>';
    return;
  }
  const result = (pct / 100) * val;
  oResult.className = 'result';
  oResult.innerHTML =
    '<div class="big">' + fmt(result) + '</div>' +
    '<div class="sub">' + fmt(pct) + '% of ' + fmt(val) + '</div>';
}

const wX = document.getElementById('w-x');
const wY = document.getElementById('w-y');
const wResult = document.getElementById('w-result');

function renderWhatPercent() {
  const x = parseFloat(wX.value);
  const y = parseFloat(wY.value);
  if (isNaN(x) || isNaN(y) || y === 0) {
    wResult.className = 'result';
    wResult.innerHTML = '<div class="big">—</div><div class="sub">Y cannot be zero</div>';
    return;
  }
  const result = (x / y) * 100;
  wResult.className = 'result';
  wResult.innerHTML =
    '<div class="big">' + fmt(result) + '%</div>' +
    '<div class="sub">' + fmt(x) + ' is ' + fmt(result) + '% of ' + fmt(y) + '</div>';
}

[cOld, cNew].forEach((el) => el.addEventListener('input', renderChange));
[oPct, oVal].forEach((el) => el.addEventListener('input', renderOf));
[wX, wY].forEach((el) => el.addEventListener('input', renderWhatPercent));

document.querySelectorAll('.tab').forEach((tab) => {
  tab.addEventListener('click', () => {
    document.querySelectorAll('.tab').forEach((t) => t.classList.remove('active'));
    document.querySelectorAll('.panel').forEach((p) => p.classList.remove('active'));
    tab.classList.add('active');
    document.getElementById('panel-' + tab.dataset.tab).classList.add('active');
  });
});

renderChange();
renderOf();
renderWhatPercent();