Mortgage Payment Breakdown — Free PITI Calculator with Real Amortization

<div class="mpb-card">
  <div class="mpb-head">
    <h3>Monthly payment breakdown</h3>
    <p>Adjust the inputs — the donut and totals recalculate with the real amortization formula.</p>
  </div>

  <div class="mpb-grid">
    <div class="mpb-inputs">
      <label class="mpb-field">
        <span>Home price</span>
        <input type="number" id="mpbPrice" value="420000" min="0" step="1000">
      </label>
      <label class="mpb-field">
        <span>Down payment</span>
        <input type="number" id="mpbDown" value="84000" min="0" step="1000">
      </label>
      <label class="mpb-field">
        <span>Interest rate (APR %)</span>
        <input type="number" id="mpbRate" value="6.5" min="0" step="0.05">
      </label>
      <label class="mpb-field">
        <span>Term (years)</span>
        <select id="mpbTerm">
          <option value="15">15</option>
          <option value="30" selected>30</option>
        </select>
      </label>
      <label class="mpb-field">
        <span>Annual property tax</span>
        <input type="number" id="mpbTax" value="5200" min="0" step="50">
      </label>
      <label class="mpb-field">
        <span>Annual insurance</span>
        <input type="number" id="mpbIns" value="1400" min="0" step="50">
      </label>
    </div>

    <div class="mpb-result">
      <svg class="mpb-donut" viewBox="0 0 120 120" aria-hidden="true">
        <circle class="mpb-track" cx="60" cy="60" r="50" />
        <circle class="mpb-seg" id="mpbSegPrincipal" cx="60" cy="60" r="50" />
        <circle class="mpb-seg" id="mpbSegInterest" cx="60" cy="60" r="50" />
        <circle class="mpb-seg" id="mpbSegTax" cx="60" cy="60" r="50" />
        <circle class="mpb-seg" id="mpbSegIns" cx="60" cy="60" r="50" />
      </svg>
      <div class="mpb-total" id="mpbTotal">$0</div>
      <div class="mpb-total-label">per month</div>

      <ul class="mpb-legend" id="mpbLegend"></ul>
    </div>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b0c14;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.mpb-card{background:#12141f;border:1px solid #232a3d;border-radius:18px;padding:26px;width:100%;max-width:640px;color:#e6e8f5}
.mpb-head h3{font-size:17px;font-weight:800;margin-bottom:6px}
.mpb-head p{font-size:12.5px;color:#8b93b0;margin-bottom:22px}
.mpb-grid{display:grid;grid-template-columns:1fr 220px;gap:24px}
@media (max-width:560px){.mpb-grid{grid-template-columns:1fr}}
.mpb-inputs{display:flex;flex-direction:column;gap:12px}
.mpb-field{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:#9aa0c0}
.mpb-field input,.mpb-field select{background:#0e1018;border:1px solid #232a3d;border-radius:8px;padding:9px 10px;color:#fff;font-size:13.5px;outline:none}
.mpb-field input:focus,.mpb-field select:focus{border-color:#60a5fa}
.mpb-result{display:flex;flex-direction:column;align-items:center;text-align:center}
.mpb-donut{width:130px;height:130px;transform:rotate(-90deg)}
.mpb-track{fill:none;stroke:#1e2230;stroke-width:16}
.mpb-seg{fill:none;stroke-width:16;stroke-linecap:butt;transition:stroke-dasharray .4s ease,stroke-dashoffset .4s ease}
.mpb-total{font-size:26px;font-weight:800;margin-top:-88px}
.mpb-total-label{font-size:11px;color:#8b93b0;margin-bottom:14px}
.mpb-legend{list-style:none;text-align:left;width:100%;display:flex;flex-direction:column;gap:6px;font-size:11.5px}
.mpb-legend li{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mpb-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;flex-shrink:0}
.mpb-legend-label{display:flex;align-items:center;color:#9aa0c0}
.mpb-legend-value{font-weight:700;color:#e6e8f5}

var priceEl = document.getElementById('mpbPrice');
var downEl = document.getElementById('mpbDown');
var rateEl = document.getElementById('mpbRate');
var termEl = document.getElementById('mpbTerm');
var taxEl = document.getElementById('mpbTax');
var insEl = document.getElementById('mpbIns');
var totalEl = document.getElementById('mpbTotal');
var legendEl = document.getElementById('mpbLegend');

var CIRC = 2 * Math.PI * 50; // matches the donut circle's actual r=50
var COLORS = { principal: '#60a5fa', interest: '#f472b6', tax: '#fbbf24', ins: '#34d399' };
var SEGS = ['Principal', 'Interest', 'Tax', 'Insurance'];
var SEG_IDS = { Principal: 'mpbSegPrincipal', Interest: 'mpbSegInterest', Tax: 'mpbSegTax', Insurance: 'mpbSegIns' };

function fmt(n) {
  return '$' + Math.round(n).toLocaleString();
}

// The standard fixed-rate amortization formula: M = P * [r(1+r)^n] / [(1+r)^n - 1]
// where P = loan principal, r = monthly interest rate, n = total number of payments.
function monthlyPrincipalAndInterest(principal, annualRatePct, years) {
  var r = (annualRatePct / 100) / 12;
  var n = years * 12;
  if (r === 0) return principal / n;
  var factor = Math.pow(1 + r, n);
  return principal * (r * factor) / (factor - 1);
}

function recalc() {
  var price = Math.max(0, Number(priceEl.value) || 0);
  var down = Math.min(price, Math.max(0, Number(downEl.value) || 0));
  var rate = Math.max(0, Number(rateEl.value) || 0);
  var years = Number(termEl.value);
  var annualTax = Math.max(0, Number(taxEl.value) || 0);
  var annualIns = Math.max(0, Number(insEl.value) || 0);

  var principal = price - down;
  var pAndI = principal > 0 ? monthlyPrincipalAndInterest(principal, rate, years) : 0;

  // Split P&I into this month's principal vs interest portion using the same
  // amortization math: interest = outstanding balance * monthly rate.
  var monthlyRate = (rate / 100) / 12;
  var firstMonthInterest = principal * monthlyRate;
  var firstMonthPrincipal = Math.max(0, pAndI - firstMonthInterest);

  var monthlyTax = annualTax / 12;
  var monthlyIns = annualIns / 12;
  var total = pAndI + monthlyTax + monthlyIns;

  totalEl.textContent = fmt(total);

  var parts = [
    { name: 'Principal', value: firstMonthPrincipal, color: COLORS.principal },
    { name: 'Interest', value: firstMonthInterest, color: COLORS.interest },
    { name: 'Tax', value: monthlyTax, color: COLORS.tax },
    { name: 'Insurance', value: monthlyIns, color: COLORS.ins },
  ];

  var offset = 0;
  parts.forEach(function (part) {
    var frac = total > 0 ? part.value / total : 0;
    var seg = document.getElementById(SEG_IDS[part.name]);
    seg.style.stroke = part.color;
    seg.style.strokeDasharray = (CIRC * frac) + ' ' + CIRC;
    seg.style.strokeDashoffset = -offset;
    offset += CIRC * frac;
  });

  legendEl.innerHTML = parts.map(function (part) {
    return '<li><span class="mpb-legend-label"><span class="mpb-dot" style="background:' + part.color + '"></span>' + part.name +
      '</span><span class="mpb-legend-value">' + fmt(part.value) + '</span></li>';
  }).join('');
}

[priceEl, downEl, rateEl, termEl, taxEl, insEl].forEach(function (el) {
  el.addEventListener('input', recalc);
  el.addEventListener('change', recalc);
});

recalc();