Mortgage Calculator

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mortgage Calculator</title>
    <style>
        /* Add some basic styling */
        body { font-family: Arial, sans-serif; margin: 20px; padding: 20px; max-width: 400px; margin: auto; }
        input[type="number"] { width: 100%; padding: 8px; margin: 8px 0; box-sizing: border-box; }
        button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
    </style>
</head>
<body>
    <h1>Mortgage Calculator</h1>
    <label for="loanAmount">Loan Amount:</label>
    <input type="number" id="loanAmount" placeholder="Enter loan amount">

    <label for="interestRate">Annual Interest Rate (%):</label>
    <input type="number" id="interestRate" placeholder="Enter interest rate" step="0.01">

    <label for="loanTerm">Loan Term (years):</label>
    <input type="number" id="loanTerm" placeholder="Enter loan term in years">

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

    <h2>Monthly Payment: <span id="monthlyPayment">$0.00</span></h2>

    <script src="mortgage-calculator.js"></script>
</body>
</html>

function calculateMortgage() {
    // Get values from the input fields
    const loanAmount = document.getElementById("loanAmount").value;
    const interestRate = document.getElementById("interestRate").value;
    const loanTerm = document.getElementById("loanTerm").value;

    // Convert annual interest rate percentage to a monthly rate
    const monthlyRate = (interestRate / 100) / 12;
    // Calculate the number of payments
    const numPayments = loanTerm * 12;

    // Use the formula to calculate monthly payment
    const monthlyPayment = (loanAmount * monthlyRate) / (1 - Math.pow((1 + monthlyRate), -numPayments));

    // Display the result
    document.getElementById("monthlyPayment").textContent = "$" + monthlyPayment.toFixed(2);
}
Scroll to Top