DISCOUNT Calculator

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

let mode = 'calc';
  const fmt = n => '₹' + n.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

  document.querySelectorAll('#mode-tabs .tab').forEach(t => {
    t.addEventListener('click', () => {
      document.querySelectorAll('#mode-tabs .tab').forEach(x => x.classList.remove('active'));
      t.classList.add('active');
      mode = t.dataset.mode;
      document.getElementById('mode-calc').classList.toggle('hidden', mode !== 'calc');
      document.getElementById('mode-reverse').classList.toggle('hidden', mode !== 'reverse');
      calc();
    });
  });

  document.querySelectorAll('input[type="number"]').forEach(i => i.addEventListener('input', calc));

  function calc() {
    if (mode === 'calc') {
      const price = parseFloat(document.getElementById('inp-price').value) || 0;
      const pct = parseFloat(document.getElementById('inp-pct').value) || 0;
      const saving = price * pct / 100;
      const final_ = price - saving;
      document.getElementById('result-label').textContent = 'FINAL PRICE';
      document.getElementById('val-main').textContent = fmt(final_);
      document.getElementById('val-a').textContent = fmt(price);
      document.getElementById('lbl-a').textContent = 'Original Price';
      document.getElementById('val-b').textContent = fmt(saving);
      document.getElementById('lbl-b').textContent = 'You Save';
      document.getElementById('val-c').textContent = pct + '%';
      document.getElementById('lbl-c').textContent = 'Discount';
    } else {
      const orig = parseFloat(document.getElementById('inp-orig').value) || 0;
      const paid = parseFloat(document.getElementById('inp-paid').value) || 0;
      const saving = orig - paid;
      const pct = orig > 0 ? (saving / orig * 100) : 0;
      document.getElementById('result-label').textContent = 'DISCOUNT PERCENTAGE';
      document.getElementById('val-main').textContent = pct.toFixed(1) + '%';
      document.getElementById('val-main').style.color = 'var(--accent)';
      document.getElementById('val-a').textContent = fmt(orig);
      document.getElementById('lbl-a').textContent = 'Original Price';
      document.getElementById('val-b').textContent = fmt(saving);
      document.getElementById('lbl-b').textContent = 'You Saved';
      document.getElementById('val-c').textContent = fmt(paid);
      document.getElementById('lbl-c').textContent = 'You Paid';
    }
  }
  calc();