Embed

<div class="mortgage-calculator">
  <h2>Mortgage Payment Calculator</h2>

  <label>Home Price</label>
  <input type="number" id="homePrice" value="600000">

  <label>Down Payment</label>
  <input type="number" id="downPayment" value="120000">

  <label>Interest Rate (%)</label>
  <input type="number" id="interestRate" value="6.5" step="0.01">

  <label>Loan Term (Years)</label>
  <input type="number" id="loanTerm" value="30">

  <label>Annual Property Taxes</label>
  <input type="number" id="taxes" value="6000">

  <label>Annual Homeowners Insurance</label>
  <input type="number" id="insurance" value="1800">

  <button onclick="calculateMortgage()">Calculate Payment</button>

  <div class="result">
    <p>Loan Amount: <strong id="loanAmount">$0</strong></p>
    <p>Principal & Interest: <strong id="piPayment">$0</strong></p>
    <p>Taxes & Insurance: <strong id="escrowPayment">$0</strong></p>
    <p>Total Estimated Payment: <strong id="totalPayment">$0</strong></p>
  </div>
</div>

<style>
  .mortgage-calculator {
    max-width: 500px;
    margin: 30px auto;
    padding: 30px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    font-family: Arial, sans-serif;
    color: #111;
  }

  .mortgage-calculator h2 {
    text-align: center;
    margin-bottom: 20px;
    font-weight: 500;
    letter-spacing: 1px;
  }

  .mortgage-calculator label {
    display: block;
    margin-top: 14px;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
  }

  .mortgage-calculator input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
  }

  .mortgage-calculator button {
    width: 100%;
    margin-top: 22px;
    padding: 14px;
    border: none;
    border-radius: 8px;
    background: #111;
    color: white;
    font-size: 16px;
    cursor: pointer;
  }

  .mortgage-calculator button:hover {
    background: #333;
  }

  .result {
    margin-top: 24px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
    font-size: 16px;
  }

  .result p {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
  }
</style>

<script>
  function formatCurrency(amount) {
    return amount.toLocaleString("en-US", {
      style: "currency",
      currency: "USD",
      maximumFractionDigits: 0
    });
  }

  function calculateMortgage() {
    const homePrice = parseFloat(document.getElementById("homePrice").value) || 0;
    const downPayment = parseFloat(document.getElementById("downPayment").value) || 0;
    const interestRate = parseFloat(document.getElementById("interestRate").value) || 0;
    const loanTerm = parseFloat(document.getElementById("loanTerm").value) || 30;
    const taxes = parseFloat(document.getElementById("taxes").value) || 0;
    const insurance = parseFloat(document.getElementById("insurance").value) || 0;

    const loanAmount = homePrice - downPayment;
    const monthlyRate = interestRate / 100 / 12;
    const numberOfPayments = loanTerm * 12;

    let piPayment = 0;

    if (monthlyRate > 0) {
      piPayment = loanAmount * 
        (monthlyRate * Math.pow(1 + monthlyRate, numberOfPayments)) / 
        (Math.pow(1 + monthlyRate, numberOfPayments) - 1);
    } else {
      piPayment = loanAmount / numberOfPayments;
    }

    const escrowPayment = (taxes + insurance) / 12;
    const totalPayment = piPayment + escrowPayment;

    document.getElementById("loanAmount").textContent = formatCurrency(loanAmount);
    document.getElementById("piPayment").textContent = formatCurrency(piPayment);
    document.getElementById("escrowPayment").textContent = formatCurrency(escrowPayment);
    document.getElementById("totalPayment").textContent = formatCurrency(totalPayment);
  }

  calculateMortgage();
</script>

Christopher William Hovenier 

Christopher William Hovenier operates a mortgage specialist. He has over 10 years in the industry and focuses on providing financing solutions for homebuyers and real‑estate investors.