TIP Calculator

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

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

  document.querySelectorAll('#tip-group .toggle-item').forEach(t => {
    t.addEventListener('click', () => {
      document.querySelectorAll('#tip-group .toggle-item').forEach(x => x.classList.remove('active'));
      t.classList.add('active');
      tipPct = parseFloat(t.dataset.tip);
      document.getElementById('inp-tip-custom').value = '';
      calc();
    });
  });

  document.getElementById('inp-tip-custom').addEventListener('input', function() {
    if (this.value !== '') {
      document.querySelectorAll('#tip-group .toggle-item').forEach(x => x.classList.remove('active'));
      tipPct = parseFloat(this.value) || 0;
      calc();
    }
  });

  document.getElementById('inp-bill').addEventListener('input', calc);
  document.getElementById('inp-people').addEventListener('input', calc);

  function calc() {
    const bill = parseFloat(document.getElementById('inp-bill').value) || 0;
    const people = parseInt(document.getElementById('inp-people').value) || 1;
    const tip = bill * tipPct / 100;
    const total = bill + tip;

    document.getElementById('val-total').textContent = fmt(total);
    document.getElementById('val-tip').textContent = fmt(tip);
    document.getElementById('val-bill').textContent = fmt(bill);
    document.getElementById('val-pp-total').textContent = fmt(total / people);
    document.getElementById('val-pp-tip').textContent = fmt(tip / people);
  }
  calc();