Percentage Calculator

Standalone, zero-dependency JavaScript implementation powering this tool. Free to inspect, copy, and build upon.

// Tab switching
  document.getElementById('tabs').addEventListener('click', e => {
    if (!e.target.matches('.tab')) return;
    const tab = e.target.dataset.tab;
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
    e.target.classList.add('active');
    document.getElementById('panel-' + tab).classList.add('active');
  });

  function fmt(n) {
    if (!isFinite(n)) return '—';
    // Round to 6 significant figures
    const rounded = parseFloat(n.toPrecision(8));
    return rounded.toLocaleString();
  }

  // Tab 1: X% of Y
  function calcXofY() {
    const pct = parseFloat(document.getElementById('xofy-pct').value);
    const num = parseFloat(document.getElementById('xofy-num').value);
    const rv = document.getElementById('rv-xofy');
    const rf = document.getElementById('rf-xofy');
    if (isNaN(pct) || isNaN(num)) { rv.textContent = '—'; rf.textContent = ''; return; }
    const result = (pct / 100) * num;
    rv.textContent = fmt(result);
    rf.textContent = `Formula: (${pct} / 100) × ${num} = ${fmt(result)}`;
  }
  document.getElementById('xofy-pct').addEventListener('input', calcXofY);
  document.getElementById('xofy-num').addEventListener('input', calcXofY);

  // Tab 2: % of What
  function calcPofWhat() {
    const val = parseFloat(document.getElementById('pow-val').value);
    const pct = parseFloat(document.getElementById('pow-pct').value);
    const rv = document.getElementById('rv-pow');
    const rf = document.getElementById('rf-pow');
    if (isNaN(val) || isNaN(pct) || pct === 0) { rv.textContent = '—'; rf.textContent = ''; return; }
    const result = (val / pct) * 100;
    rv.textContent = fmt(result);
    rf.textContent = `Formula: (${val} / ${pct}) × 100 = ${fmt(result)}`;
  }
  document.getElementById('pow-val').addEventListener('input', calcPofWhat);
  document.getElementById('pow-pct').addEventListener('input', calcPofWhat);

  // Tab 3: % Change
  function calcChange() {
    const from = parseFloat(document.getElementById('chg-from').value);
    const to = parseFloat(document.getElementById('chg-to').value);
    const rv = document.getElementById('rv-change');
    const rf = document.getElementById('rf-change');
    const rl = document.getElementById('rl-change');
    if (isNaN(from) || isNaN(to) || from === 0) { rv.textContent = '—'; rv.className = 'result-value'; rf.textContent = ''; rl.textContent = 'Change'; return; }
    const result = ((to - from) / Math.abs(from)) * 100;
    const isInc = result >= 0;
    rv.textContent = (isInc ? '+' : '') + fmt(result) + '%';
    rv.className = 'result-value ' + (isInc ? 'change-positive' : 'change-negative');
    rl.textContent = isInc ? 'Increase' : 'Decrease';
    rf.textContent = `Formula: ((${to} − ${from}) / |${from}|) × 100 = ${fmt(result)}%`;
  }
  document.getElementById('chg-from').addEventListener('input', calcChange);
  document.getElementById('chg-to').addEventListener('input', calcChange);

  // Tab 4: Reverse %
  function calcReverse() {
    const x = parseFloat(document.getElementById('rev-x').value);
    const y = parseFloat(document.getElementById('rev-y').value);
    const rv = document.getElementById('rv-rev');
    const rf = document.getElementById('rf-rev');
    if (isNaN(x) || isNaN(y) || y === 0) { rv.textContent = '—'; rf.textContent = ''; return; }
    const result = (x / y) * 100;
    rv.textContent = fmt(result) + '%';
    rf.textContent = `Formula: (${x} / ${y}) × 100 = ${fmt(result)}%`;
  }
  document.getElementById('rev-x').addEventListener('input', calcReverse);
  document.getElementById('rev-y').addEventListener('input', calcReverse);