Donation Amount Picker — Give Form HTML CSS JS

<form class="dap-card" id="dapForm">
  <h3>Support our work</h3>

  <div class="dap-freq" role="radiogroup" aria-label="Frequency">
    <button type="button" class="dap-freq-btn active" data-freq="once">One-time</button>
    <button type="button" class="dap-freq-btn" data-freq="monthly">Monthly</button>
  </div>

  <div class="dap-amounts" id="dapAmounts"></div>

  <div class="dap-custom" id="dapCustom">
    <span class="dap-currency">$</span>
    <input type="number" id="dapCustomInput" min="1" step="1" placeholder="Other amount">
  </div>

  <p class="dap-impact" id="dapImpact"></p>

  <button type="submit" class="dap-submit" id="dapSubmit">
    Donate <b id="dapTotal">$25</b> <span id="dapFreqLabel"></span>
  </button>
</form>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f1f5f9;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:40px 24px}

.dap-card{background:#fff;border-radius:16px;padding:24px;width:100%;max-width:380px;box-shadow:0 18px 44px rgba(15,23,42,.1)}
.dap-card h3{font-size:18px;font-weight:800;color:#0f172a;margin-bottom:16px}

.dap-freq{display:flex;background:#f1f5f9;border-radius:10px;padding:3px;margin-bottom:16px}
.dap-freq-btn{flex:1;border:none;background:none;padding:9px;border-radius:8px;font-size:13px;font-weight:700;color:#64748b;cursor:pointer;transition:background .15s,color .15s}
.dap-freq-btn.active{background:#fff;color:#0f172a;box-shadow:0 1px 3px rgba(15,23,42,.12)}

.dap-amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:9px}
.dap-amt{border:1.5px solid #e2e8f0;background:#fff;border-radius:10px;padding:13px 0;font-size:15px;font-weight:800;color:#1e293b;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.dap-amt:hover{border-color:#cbd5e1}
.dap-amt.active{border-color:#16a34a;background:#f0fdf4;color:#15803d}

.dap-custom{display:flex;align-items:center;border:1.5px solid #e2e8f0;border-radius:10px;padding:0 13px;margin-bottom:14px;transition:border-color .15s,box-shadow .15s}
.dap-custom.active{border-color:#16a34a;box-shadow:0 0 0 3px rgba(34,197,94,.12)}
.dap-currency{font-size:15px;font-weight:800;color:#94a3b8}
.dap-custom input{flex:1;border:none;outline:none;padding:12px 6px;font-size:15px;font-weight:700;color:#0f172a;font-family:inherit}

.dap-impact{font-size:12.5px;color:#16a34a;font-weight:600;background:#f0fdf4;border-radius:8px;padding:9px 12px;margin-bottom:16px;line-height:1.45;min-height:38px;display:flex;align-items:center}

.dap-submit{width:100%;background:#16a34a;color:#fff;border:none;border-radius:10px;padding:13px;font-size:15px;font-weight:700;cursor:pointer;transition:background .15s}
.dap-submit:hover{background:#15803d}
.dap-submit b{font-weight:800}

var PRESETS = [10, 25, 50, 100, 250, 500];
var IMPACT = {       // dollar -> message (nearest preset at or below picked amount)
  10: 'Provides a week of clean water for one family.',
  25: 'Supplies school materials for a child for a month.',
  50: 'Funds a day of meals for a family of four.',
  100: 'Covers medical supplies for a rural clinic visit.',
  250: 'Sponsors a month of after-school programs.',
  500: 'Funds emergency relief kits for ten households.',
};

var freq = 'once';
var amount = 25;
var custom = false;

var amountsEl = document.getElementById('dapAmounts');
var customWrap = document.getElementById('dapCustom');
var customInput = document.getElementById('dapCustomInput');

amountsEl.innerHTML = PRESETS.map(function (v) {
  return '<button type="button" class="dap-amt' + (v === amount ? ' active' : '') + '" data-amt="' + v + '">$' + v + '</button>';
}).join('');

function impactFor(amt) {
  var keys = PRESETS.slice().sort(function (a, b) { return b - a; });
  for (var i = 0; i < keys.length; i++) { if (amt >= keys[i]) return IMPACT[keys[i]]; }
  return 'Every dollar makes a difference — thank you.';
}

function sync() {
  document.querySelectorAll('.dap-amt').forEach(function (b) {
    b.classList.toggle('active', !custom && +b.dataset.amt === amount);
  });
  customWrap.classList.toggle('active', custom);
  var valid = amount >= 1;
  document.getElementById('dapTotal').textContent = valid ? '$' + amount : '$0';
  document.getElementById('dapFreqLabel').textContent = freq === 'monthly' ? '/ month' : '';
  document.getElementById('dapImpact').textContent = valid ? impactFor(amount) : 'Enter an amount to see your impact.';
  document.getElementById('dapSubmit').disabled = !valid;
}

amountsEl.addEventListener('click', function (e) {
  var btn = e.target.closest('.dap-amt');
  if (!btn) return;
  custom = false;
  amount = +btn.dataset.amt;
  customInput.value = '';
  sync();
});

customInput.addEventListener('focus', function () { custom = true; sync(); });
customInput.addEventListener('input', function () {
  custom = true;
  amount = parseInt(this.value, 10) || 0;
  sync();
});

document.querySelector('.dap-freq').addEventListener('click', function (e) {
  var btn = e.target.closest('.dap-freq-btn');
  if (!btn) return;
  freq = btn.dataset.freq;
  document.querySelectorAll('.dap-freq-btn').forEach(function (b) { b.classList.toggle('active', b === btn); });
  sync();
});

document.getElementById('dapForm').addEventListener('submit', function (e) {
  e.preventDefault();
  // Proceed to payment with { amount, freq } here.
  var btn = document.getElementById('dapSubmit');
  btn.textContent = '✓ Thank you for your ' + (freq === 'monthly' ? 'monthly ' : '') + '$' + amount + ' gift!';
});

sync();