Text

<h2 style="white-space:pre-line">Mortgage Calculator</h2>
<p>This mortgage calculator is for learning purposes only. It gives you a rough idea of what your mortgage payments might be, but real mortgage rates and monthly payments can change based on many things, like where you live and what kind of loan you get. The real costs might be different from what you see here. The numbers you get are based on the information you put in. They might not include other costs that lenders often add to your monthly payment, such as property taxes and home insurance. Your actual monthly payment might be higher than what this calculator shows. Always talk to a real lender or financial advisor to get the most accurate information about mortgages and home loans.</p>

Embed

<!DOCTYPE html>
<html>
<head>
    <style>
        .calculator {
            max-width: 400px;
            margin: auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        input, button {
            display: block;
            width: 100%;
            margin-bottom: 10px;
            padding: 10px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <input type="number" id="homePrice" placeholder="Home Price ($)" required>
        <input type="number" id="downPayment" placeholder="Down Payment ($)" required>
        <input type="number" id="interestRate" placeholder="Interest Rate (%)" step="0.01" required>
        <input type="number" id="loanTerm" placeholder="Loan Term (Years)" required>
        <input type="number" id="propertyTaxRate" placeholder="Property Tax Rate (%)" step="0.01" required>
        <input type="number" id="homeInsurance" placeholder="Homeowners Insurance ($/year)" required>
        <input type="number" id="pmiRate" placeholder="PMI Rate (%)" step="0.01">
        <input type="number" id="hoaDues" placeholder="HOA Dues ($/month)">
        <button onclick="calculateMortgage()">Calculate</button>
        <p id="result"></p>
    </div>

    <script>
        function calculateMortgage() {
            let homePrice = parseFloat(document.getElementById('homePrice').value);
            let downPayment = parseFloat(document.getElementById('downPayment').value);
            let interestRate = parseFloat(document.getElementById('interestRate').value) / 100 / 12; // Monthly interest rate
            let loanTerm = parseFloat(document.getElementById('loanTerm').value) * 12; // Loan term in months
            let propertyTaxRate = parseFloat(document.getElementById('propertyTaxRate').value) / 100; // Property tax rate
            let homeInsurance = parseFloat(document.getElementById('homeInsurance').value) / 12; // Monthly insurance
            let pmiRate = parseFloat(document.getElementById('pmiRate').value) / 100 / 12; // Monthly PMI rate
            let hoaDues = parseFloat(document.getElementById('hoaDues').value) || 0; // Monthly HOA dues
            
            let principal = homePrice - downPayment;
            let monthlyPayment = (principal * interestRate * Math.pow(1 + interestRate, loanTerm)) / (Math.pow(1 + interestRate, loanTerm) - 1);
            
            // Calculate additional costs
            let monthlyPropertyTax = (homePrice * propertyTaxRate) / 12;
            let monthlyPMI = downPayment / homePrice < 0.20 ? (principal * pmiRate) : 0; // PMI only if down payment is less than 20%

            // Total Monthly Payment
            let totalMonthlyPayment = monthlyPayment + monthlyPropertyTax + homeInsurance + monthlyPMI + hoaDues;

            document.getElementById('result').innerHTML = `
                <strong>Your Monthly Payment Breakdown:</strong><br>
                Principal & Interest: $${monthlyPayment.toFixed(2)}<br>
                Property Taxes: $${monthlyPropertyTax.toFixed(2)}<br>
                Homeowners Insurance: $${homeInsurance.toFixed(2)}<br>
                PMI: $${monthlyPMI.toFixed(2)}<br>
                HOA Dues: $${hoaDues.toFixed(2)}<br>
                <strong>Total Monthly Payment: $${totalMonthlyPayment.toFixed(2)}</strong>
            `;
        }
    </script>
</body>
</html>
