What is the scary formula?

It's M = P [ i(1 + i)^n ] / [ (1 + i)^n – 1 ]. Don't worry, we break it down into tiny variables!

Why divide the rate by 1200?

Three reasons: 1) Convert Percentage to Decimal (/100). 2) Convert Annual rate to Monthly (/12). 100 * 12 = 1200.

Can I use this for car loans?

Yes! The math for a fixed-rate car loan is exactly the same as a fixed-rate mortgage.

Build Your Own Mortgage Calculator (10 Easy Steps)

Hello Future Homeowners & Coders! 🏠💻

Mortgages are confusing. You borrow $300,000, but over 30 years, you might pay back $600,000!

This is called The Pizza Paradox: Imagine buying a pizza for $20, but because you eat it slowly over 30 years, the shop charges you $40.

Today, we will build a tool to calculate exactly how much that "Pizza" (House) really costs. We'll tame the Scary Mortgage Formula using simple JavaScript.

🎯What You Will Learn

✓Master the Mortgage Formula: M = P[r(1+r)^n]/[(1+r)^n-1]
✓Handle 'Interest Rate' conversions (Annual % -> Monthly Decimal)
✓Use Math.pow() for exponents (Compound Interest)
✓Format currency using .toFixed(2)
✓Build a clean financial UI

Step 1: The Blueprint (HTML) 📐

We need 3 main numbers to calculate a loan:

Principal (P): The loan amount (e.g., $300,000).
Rate (r): The annual interest rate (e.g., 5.5%).
Years (n): How long is the loan? (e.g., 30 years).

html

<div class="calculator-card">
    <h2>🏡 Mortgage Calculator</h2>
    
    <label>Loan Amount ($)</label>
    <input type="number" id="principal" placeholder="300000">
    
    <label>Interest Rate (%)</label>
    <input type="number" id="rate" placeholder="5.5">
    
    <label>Loan Term (Years)</label>
    <input type="number" id="years" placeholder="30">
    
    <button onclick="calculateMortgage()">Calculate Payment</button>
    
    <div id="result">Monthly Payment: $0.00</div>
</div>

Step 2: The JavaScript Setup 🏗️

Let's grab our values.

javascript

function calculateMortgage() {
    // 1. Get the raw numbers
    var P = Number(document.getElementById('principal').value);
    var annualRate = Number(document.getElementById('rate').value);
    var years = Number(document.getElementById('years').value);
    
    if(P === 0 || annualRate === 0 || years === 0) {
        alert("Please fill in all fields!");
        return;
    }
}

Step 3: Preparing the "Rate" (r) 📉

The formula needs the Monthly Interest Rate as a decimal, not the Annual Percentage.

5% becomes 0.05 (divide by 100).
Annual becomes Monthly (divide by 12).
Shortcut: Divide by 1200.

javascript

    // 2. Convert Annual Rate to Monthly Decimal
    // Example: 5% -> 0.05 -> 0.00416...
    var r = annualRate / 1200;

Step 4: Preparing the "Term" (n) 🗓️

The formula counts Payments, not Years.

30 Years * 12 Months = 360 Payments.

javascript

    // 3. Convert Years to Months (Total Payments)
    var n = years * 12;

Step 5: The Numerator (Top part of fraction) ⬆️

Formula Part 1: r * (1 + r)^n We use Math.pow(base, exponent) for the power.

javascript

    // 4. Calculate Top of Fraction
    var numerator = r * Math.pow(1 + r, n);

Step 6: The Denominator (Bottom part of fraction) ⬇️

Formula Part 2: (1 + r)^n - 1

javascript

    // 5. Calculate Bottom of Fraction
    var denominator = Math.pow(1 + r, n) - 1;

Step 7: The Final Division ➗

Formula Part 3: P * (Top / Bottom)

javascript

    // 6. Divide and Multiply by Principal
    var monthlyPayment = P * (numerator / denominator);

Step 8: Formatting Money 💵

325.1299999 looks bad. We want $325.13. We use .toFixed(2) for this.

javascript

    // 7. Format Result
    var resultText = monthlyPayment.toFixed(2);
    document.getElementById('result').innerText = "Monthly Payment: $" + resultText;

Step 9: Make it Trustworthy (CSS) 🏦

Financial tools should look clean and professional. Let's use green for money!

css

<style>
    .calculator-card {
        background: white; padding: 30px; 
        border-radius: 10px; width: 350px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        font-family: Arial, sans-serif;
    }
    input { 
        width: 100%; padding: 10px; margin: 5px 0 15px 0;
        border: 1px solid #ddd; border-radius: 5px;
        box-sizing: border-box; /* Keeps padding inside width */
    }
    button {
        width: 100%; padding: 12px; background: #2ecc71; 
        color: white; border: none; border-radius: 5px;
        font-size: 16px; cursor: pointer;
    }
    button:hover { background: #27ae60; }
    #result { 
        margin-top: 20px; font-size: 22px; 
        color: #2c3e50; font-weight: bold; text-align: center;
    }
</style>

Step 10: The Full Source Code 📜

Here is the complete tool. Copy-paste this and you're ready to analyze loans!

html

<!DOCTYPE html>
<html>
<head>
    <title>Simple Mortgage Calculator</title>
    <style>
        body { background: #ecf0f1; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: 'Helvetica Neue', sans-serif; margin: 0;}
        
        .card { background: white; padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 320px; }
        
        h2 { text-align: center; color: #34495e; margin-top: 0; }
        
        label { font-size: 13px; color: #7f8c8d; font-weight: bold; display: block; margin-top: 15px; }
        
        input {
            width: 100%; padding: 12px; margin-top: 5px;
            border: 2px solid #ecf0f1; border-radius: 8px;
            font-size: 16px; transition: 0.3s;
            box-sizing: border-box;
        }
        input:focus { border-color: #3498db; outline: none; }
        
        button {
            width: 100%; padding: 15px; margin-top: 25px;
            background: #27ae60; color: white;
            border: none; border-radius: 8px;
            font-size: 16px; font-weight: bold; cursor: pointer;
            transition: 0.3s;
        }
        button:hover { background: #219150; transform: translateY(-2px); }
        
        #output-box {
            margin-top: 25px; padding: 20px;
            background: #f8f9fa; border-radius: 8px;
            text-align: center;
        }
        .small-text { font-size: 12px; color: #95a5a6; text-transform: uppercase; letter-spacing: 1px;}
        .big-money { font-size: 32px; color: #2c3e50; font-weight: 800; margin: 5px 0; }
    </style>
</head>
<body>

<div class="card">
    <h2>🏡 Mortgage Calc</h2>
    
    <label>LOAN AMOUNT ($)</label>
    <input type="number" id="p" placeholder="300000">
    
    <label>INTEREST RATE (%)</label>
    <input type="number" id="r" placeholder="5.0">
    
    <label>LOAN TERM (YEARS)</label>
    <input type="number" id="y" placeholder="30">
    
    <button onclick="calc()">Calculate Payment</button>
    
    <div id="output-box">
        <div class="small-text">Estimated Monthly Payment</div>
        <div class="big-money" id="res">$0.00</div>
    </div>
</div>

<script>
    function calc() {
        // 1. Get Inputs
        let P = parseFloat(document.getElementById('p').value);
        let ratePercent = parseFloat(document.getElementById('r').value);
        let years = parseFloat(document.getElementById('y').value);
        
        // Validation
        if(!P || !ratePercent || !years) {
            alert("Please enter valid numbers for all fields");
            return;
        }
        
        // 2. Convert Rate (Annual % -> Monthly Decimal)
        let monthlyRate = ratePercent / 100 / 12;
        
        // 3. Convert Years to Total Months
        let totalPayments = years * 12;
        
        // 4. The Formula: M = P[r(1+r)^n]/[(1+r)^n-1]
        
        // Calculate (1+r)^n first (it's used twice)
        let compoundFactor = Math.pow(1 + monthlyRate, totalPayments);
        
        // Calculate Numerator & Denominator
        let numerator = monthlyRate * compoundFactor;
        let denominator = compoundFactor - 1;
        
        // Final Division
        let monthlyPayment = P * (numerator / denominator);
        
        // 5. Display Result
        document.getElementById('res').innerText = "$" + monthlyPayment.toFixed(2);
    }
</script>

</body>
</html>

Conclusion

You've successfully built a financial tool that helps people make the biggest purchase of their lives!

Remember: This same logic applies to Auto Loans and Personal Loans too. The only difference is usually the term (5 years for a car vs 30 for a house).

Try Pro Mortgage Calculator »

Hello Future Homeowners & Coders! 🏠💻

Mortgages are confusing. You borrow $300,000, but over 30 years, you might pay back $600,000!

This is called The Pizza Paradox: Imagine buying a pizza for $20, but because you eat it slowly over 30 years, the shop charges you $40.

Today, we will build a tool to calculate exactly how much that "Pizza" (House) really costs. We'll tame the Scary Mortgage Formula using simple JavaScript.

🎯What You Will Learn

✓Master the Mortgage Formula: M = P[r(1+r)^n]/[(1+r)^n-1]
✓Handle 'Interest Rate' conversions (Annual % -> Monthly Decimal)
✓Use Math.pow() for exponents (Compound Interest)
✓Format currency using .toFixed(2)
✓Build a clean financial UI

Step 1: The Blueprint (HTML) 📐

We need 3 main numbers to calculate a loan:

Principal (P): The loan amount (e.g., $300,000).
Rate (r): The annual interest rate (e.g., 5.5%).
Years (n): How long is the loan? (e.g., 30 years).

html

<div class="calculator-card">
    <h2>🏡 Mortgage Calculator</h2>
    
    <label>Loan Amount ($)</label>
    <input type="number" id="principal" placeholder="300000">
    
    <label>Interest Rate (%)</label>
    <input type="number" id="rate" placeholder="5.5">
    
    <label>Loan Term (Years)</label>
    <input type="number" id="years" placeholder="30">
    
    <button onclick="calculateMortgage()">Calculate Payment</button>
    
    <div id="result">Monthly Payment: $0.00</div>
</div>

Step 2: The JavaScript Setup 🏗️

Let's grab our values.

javascript

function calculateMortgage() {
    // 1. Get the raw numbers
    var P = Number(document.getElementById('principal').value);
    var annualRate = Number(document.getElementById('rate').value);
    var years = Number(document.getElementById('years').value);
    
    if(P === 0 || annualRate === 0 || years === 0) {
        alert("Please fill in all fields!");
        return;
    }
}

Step 3: Preparing the "Rate" (r) 📉

The formula needs the Monthly Interest Rate as a decimal, not the Annual Percentage.

5% becomes 0.05 (divide by 100).
Annual becomes Monthly (divide by 12).
Shortcut: Divide by 1200.

javascript

    // 2. Convert Annual Rate to Monthly Decimal
    // Example: 5% -> 0.05 -> 0.00416...
    var r = annualRate / 1200;

Step 4: Preparing the "Term" (n) 🗓️

The formula counts Payments, not Years.

30 Years * 12 Months = 360 Payments.

javascript

    // 3. Convert Years to Months (Total Payments)
    var n = years * 12;

Step 5: The Numerator (Top part of fraction) ⬆️

Formula Part 1: r * (1 + r)^n We use Math.pow(base, exponent) for the power.

javascript

    // 4. Calculate Top of Fraction
    var numerator = r * Math.pow(1 + r, n);

Step 6: The Denominator (Bottom part of fraction) ⬇️

Formula Part 2: (1 + r)^n - 1

javascript

    // 5. Calculate Bottom of Fraction
    var denominator = Math.pow(1 + r, n) - 1;

Step 7: The Final Division ➗

Formula Part 3: P * (Top / Bottom)

javascript

    // 6. Divide and Multiply by Principal
    var monthlyPayment = P * (numerator / denominator);

Step 8: Formatting Money 💵

325.1299999 looks bad. We want $325.13. We use .toFixed(2) for this.

javascript

    // 7. Format Result
    var resultText = monthlyPayment.toFixed(2);
    document.getElementById('result').innerText = "Monthly Payment: $" + resultText;

Step 9: Make it Trustworthy (CSS) 🏦

Financial tools should look clean and professional. Let's use green for money!

css

<style>
    .calculator-card {
        background: white; padding: 30px; 
        border-radius: 10px; width: 350px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        font-family: Arial, sans-serif;
    }
    input { 
        width: 100%; padding: 10px; margin: 5px 0 15px 0;
        border: 1px solid #ddd; border-radius: 5px;
        box-sizing: border-box; /* Keeps padding inside width */
    }
    button {
        width: 100%; padding: 12px; background: #2ecc71; 
        color: white; border: none; border-radius: 5px;
        font-size: 16px; cursor: pointer;
    }
    button:hover { background: #27ae60; }
    #result { 
        margin-top: 20px; font-size: 22px; 
        color: #2c3e50; font-weight: bold; text-align: center;
    }
</style>

Step 10: The Full Source Code 📜

Here is the complete tool. Copy-paste this and you're ready to analyze loans!

html

<!DOCTYPE html>
<html>
<head>
    <title>Simple Mortgage Calculator</title>
    <style>
        body { background: #ecf0f1; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: 'Helvetica Neue', sans-serif; margin: 0;}
        
        .card { background: white; padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 320px; }
        
        h2 { text-align: center; color: #34495e; margin-top: 0; }
        
        label { font-size: 13px; color: #7f8c8d; font-weight: bold; display: block; margin-top: 15px; }
        
        input {
            width: 100%; padding: 12px; margin-top: 5px;
            border: 2px solid #ecf0f1; border-radius: 8px;
            font-size: 16px; transition: 0.3s;
            box-sizing: border-box;
        }
        input:focus { border-color: #3498db; outline: none; }
        
        button {
            width: 100%; padding: 15px; margin-top: 25px;
            background: #27ae60; color: white;
            border: none; border-radius: 8px;
            font-size: 16px; font-weight: bold; cursor: pointer;
            transition: 0.3s;
        }
        button:hover { background: #219150; transform: translateY(-2px); }
        
        #output-box {
            margin-top: 25px; padding: 20px;
            background: #f8f9fa; border-radius: 8px;
            text-align: center;
        }
        .small-text { font-size: 12px; color: #95a5a6; text-transform: uppercase; letter-spacing: 1px;}
        .big-money { font-size: 32px; color: #2c3e50; font-weight: 800; margin: 5px 0; }
    </style>
</head>
<body>

<div class="card">
    <h2>🏡 Mortgage Calc</h2>
    
    <label>LOAN AMOUNT ($)</label>
    <input type="number" id="p" placeholder="300000">
    
    <label>INTEREST RATE (%)</label>
    <input type="number" id="r" placeholder="5.0">
    
    <label>LOAN TERM (YEARS)</label>
    <input type="number" id="y" placeholder="30">
    
    <button onclick="calc()">Calculate Payment</button>
    
    <div id="output-box">
        <div class="small-text">Estimated Monthly Payment</div>
        <div class="big-money" id="res">$0.00</div>
    </div>
</div>

<script>
    function calc() {
        // 1. Get Inputs
        let P = parseFloat(document.getElementById('p').value);
        let ratePercent = parseFloat(document.getElementById('r').value);
        let years = parseFloat(document.getElementById('y').value);
        
        // Validation
        if(!P || !ratePercent || !years) {
            alert("Please enter valid numbers for all fields");
            return;
        }
        
        // 2. Convert Rate (Annual % -> Monthly Decimal)
        let monthlyRate = ratePercent / 100 / 12;
        
        // 3. Convert Years to Total Months
        let totalPayments = years * 12;
        
        // 4. The Formula: M = P[r(1+r)^n]/[(1+r)^n-1]
        
        // Calculate (1+r)^n first (it's used twice)
        let compoundFactor = Math.pow(1 + monthlyRate, totalPayments);
        
        // Calculate Numerator & Denominator
        let numerator = monthlyRate * compoundFactor;
        let denominator = compoundFactor - 1;
        
        // Final Division
        let monthlyPayment = P * (numerator / denominator);
        
        // 5. Display Result
        document.getElementById('res').innerText = "$" + monthlyPayment.toFixed(2);
    }
</script>

</body>
</html>

Conclusion

You've successfully built a financial tool that helps people make the biggest purchase of their lives!

Remember: This same logic applies to Auto Loans and Personal Loans too. The only difference is usually the term (5 years for a car vs 30 for a house).

Try Pro Mortgage Calculator »

Build Your Own Mortgage Calculator (10 Easy Steps)

Step 1: The Blueprint (HTML) 📐

Step 2: The JavaScript Setup 🏗️

Step 3: Preparing the "Rate" (r) 📉

Step 4: Preparing the "Term" (n) 🗓️

Step 5: The Numerator (Top part of fraction) ⬆️

Step 6: The Denominator (Bottom part of fraction) ⬇️

Step 7: The Final Division ➗

Step 8: Formatting Money 💵

Step 9: Make it Trustworthy (CSS) 🏦

Step 10: The Full Source Code 📜

Conclusion

FastTools Team

Build Your Own Mortgage Calculator (10 Easy Steps)

Step 1: The Blueprint (HTML) 📐

Step 2: The JavaScript Setup 🏗️

Step 3: Preparing the "Rate" (r) 📉

Step 4: Preparing the "Term" (n) 🗓️

Step 5: The Numerator (Top part of fraction) ⬆️

Step 6: The Denominator (Bottom part of fraction) ⬇️

Step 7: The Final Division ➗

Step 8: Formatting Money 💵

Step 9: Make it Trustworthy (CSS) 🏦

Step 10: The Full Source Code 📜

Conclusion

FastTools Team

Finance

Health

Education

Fun Tools

Image & AI

PDF Only

Social

YouTube

Convert

Developer

Festivals

Step 1: The Blueprint (HTML) 📐

Step 2: The JavaScript Setup 🏗️

Step 3: Preparing the "Rate" (r) 📉

Step 4: Preparing the "Term" (n) 🗓️

Step 5: The Numerator (Top part of fraction) ⬆️

Step 6: The Denominator (Bottom part of fraction) ⬇️

Step 7: The Final Division ➗

Step 8: Formatting Money 💵

Step 9: Make it Trustworthy (CSS) 🏦

Step 10: The Full Source Code 📜

Conclusion

FastTools Team

Step 1: The Blueprint (HTML) 📐

Step 2: The JavaScript Setup 🏗️

Step 3: Preparing the "Rate" (r) 📉

Step 4: Preparing the "Term" (n) 🗓️

Step 5: The Numerator (Top part of fraction) ⬆️

Step 6: The Denominator (Bottom part of fraction) ⬇️

Step 7: The Final Division ➗

Step 8: Formatting Money 💵

Step 9: Make it Trustworthy (CSS) 🏦

Step 10: The Full Source Code 📜

Conclusion

FastTools Team