<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mortgage Calculator</title>
    <style>
        

  
/* OBFUSCATED BY CSSOBFUSCATOR.COM at 2024/12/08 18:17:59 */
body{background-color:white;}body{padding-left:0;}body{padding-bottom:0;}body{padding-right:0;}body{padding-top:0;}[class~=calculator]{background-color:WhiteSmoke;}body{height:auto;}select,[class~=calculator],button,body{width:100%;}h5,h3,h2,h1,h4{line-height:1.5;}[class~=calculator],select{padding-left:.625pc;}[class~=calculator],select{padding-bottom:.625pc;}h1{margin-bottom:0px !important;}select,[class~=calculator]{padding-right:.625pc;}[class~=calculator],select{padding-top:.625pc;}h1{margin-top:0pt !important;}h1{font-size:.208333333in !important;}h1{text-align:left;}h2{text-align:center;}h3,h5,h4{margin-bottom:.052083333in !important;}[class~=calculator]{border-radius:.625pc;}h4,h5,h3{text-align:left;}select{flex:2;}select{border-left-width:.010416667in !important;}select{border-bottom-width:.010416667in !important;}select{border-right-width:.010416667in !important;}select{border-top-width:.010416667in !important;}select{border-left-style:solid !important;}select{border-bottom-style:solid !important;}select{border-right-style:solid !important;}select{border-top-style:solid !important;}[class~=calculator],[class~=calculator]{max-width:500px;}[class~=calculator]{margin-left:auto;}select{border-left-color:darkgray !important;}select{border-bottom-color:darkgray !important;}[class~=calculator]{margin-bottom:auto;}select{border-right-color:darkgray !important;}[class~=calculator]{margin-right:auto;}select{border-top-color:darkgray !important;}select{border-image:none !important;}button,select{border-radius:5px;}select{background-image:url("data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"%3E%3Cpath fill=\"none\" stroke=\"%23333333\" stroke-width=\"2\" d=\"M1 3l4 4 4-4\" /%3E%3C/svg%3E");}select{background-repeat:no-repeat;}select{background-position:right .104166667in center;}[class~=calculator]{margin-top:auto;}select{background-size:.104166667in;}button{padding-left:.125in;}button{padding-bottom:.125in;}button{padding-right:.125in;}button{padding-top:.125in;}button{background-color:#4caf50;}button{color:white;}button{font-size:16px;}[class~=form-group]{margin-bottom:11.25pt;}button{border-left-width:medium;}button{border-bottom-width:medium;}button{border-right-width:medium;}[class~=calculator]{background-color:WhiteSmoke;}button{border-top-width:medium;}[class~=calculator],input{padding-left:.104166667in;}input,[class~=calculator]{padding-bottom:.104166667in;}[class~=calculator],input{padding-right:.104166667in;}[class~=calculator],input{padding-top:.104166667in;}[class~=calculator]{border-radius:.625pc;}button{border-left-style:none;}button{border-bottom-style:none;}select,[class~=calculator],input,body{width:100%;}button{border-right-style:none;}button{border-top-style:none;}button{border-left-color:currentColor;}button{border-bottom-color:currentColor;}button{border-right-color:currentColor;}button{border-top-color:currentColor;}button{border-image:none;}button{cursor:pointer;}label{font-size:larger;}label{display:block;}label{margin-bottom:.052083333in;}label{color:inherit;}input{flex:5;}input{border-left-width:.0625pc !important;}[class~=calculator]{margin-left:auto;}input{border-bottom-width:.0625pc !important;}[class~=calculator]{margin-bottom:auto;}input{border-right-width:.0625pc !important;}input{border-top-width:.0625pc !important;}input{border-left-style:solid !important;}input{border-bottom-style:solid !important;}input{border-right-style:solid !important;}input{border-top-style:solid !important;}input{border-left-color:darkgray !important;}input{border-bottom-color:darkgray !important;}button:hover{background-color:#45a049;}input{border-right-color:darkgray !important;}input{border-top-color:darkgray !important;}input{border-image:none !important;}select,input{border-radius:.3125pc;}body{background-color:white;}body{padding-left:0;}body{padding-bottom:0;}body{padding-right:0;}body{padding-top:0;}body{height:auto;}h1{line-height:1.5;}h1{margin-bottom:0px !important;}h1{margin-top:0pc !important;}h1{font-size:1.25pc !important;}h1{text-align:left;}[class~=calculator]{margin-right:auto;}select{flex:2;}[class~=result],select{padding-left:.104166667in;}[class~=result],select{padding-bottom:.104166667in;}[class~=calculator]{margin-top:auto;}[class~=result],select{padding-right:.104166667in;}select,[class~=result]{padding-top:.104166667in;}[class~=result],select{border-left-width:.75pt !important;}[class~=result],select{border-bottom-width:.75pt !important;}select,[class~=result]{border-right-width:.75pt !important;}select,[class~=result]{border-top-width:.75pt !important;}[class~=result],select{border-left-style:solid !important;}[class~=result],select{border-bottom-style:solid !important;}select,[class~=result]{border-right-style:solid !important;}select,[class~=result]{border-top-style:solid !important;}[class~=result],select{border-left-color:darkgray !important;}[class~=result],select{border-bottom-color:darkgray !important;}[class~=result],select{border-right-color:darkgray !important;}select{border-top-color:darkgray !important;}select{border-image:none !important;}select{background-image:url("data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"%3E%3Cpath fill=\"none\" stroke=\"%23333333\" stroke-width=\"2\" d=\"M1 3l4 4 4-4\" /%3E%3C/svg%3E");}select{background-repeat:no-repeat;}select{background-position:right 10px center;}select{background-size:.625pc;}table,button{width:100%;}button{padding-left:.75pc;}button{padding-bottom:.75pc;}button{padding-right:.75pc;}button{padding-top:.75pc;}button{background-color:#4caf50;}button{color:white;}button{font-size:.166666667in;}button{border-left-width:medium;}button{border-bottom-width:medium;}button{border-right-width:medium;}button{border-top-width:medium;}button{border-left-style:none;}button{border-bottom-style:none;}button{border-right-style:none;}button{border-top-style:none;}button{border-left-color:currentColor;}button{border-bottom-color:currentColor;}button{border-right-color:currentColor;}button{border-top-color:currentColor;}button{border-image:none;}button,[class~=result]{border-radius:.052083333in;}button{cursor:pointer;}table{border-collapse:collapse;}table{margin-top:.208333333in;}th{border-left-width:.0625pc !important;}th{border-bottom-width:.0625pc !important;}th{border-right-width:.0625pc !important;}th{border-top-width:.0625pc !important;}th{border-left-style:solid !important;}th{border-bottom-style:solid !important;}[class~=result],th{border-top-color:darkgray !important;}[class~=result]{border-image:none !important;}th{border-right-style:solid !important;}[class~=result]{text-align:left;}[class~=result],[class~=row-button]{margin-top:11.25pt;}th{border-top-style:solid !important;}[class~=clear-btn]{margin-left:7.5pt;}th{border-left-color:darkgray !important;}th{border-bottom-color:darkgray !important;}th{border-right-color:darkgray !important;}th{border-image:none !important;}td{border-left-width:.0625pc !important;}td{border-bottom-width:.0625pc !important;}td{border-right-width:.0625pc !important;}td{border-top-width:.0625pc !important;}td{border-left-style:solid !important;}td{border-bottom-style:solid !important;}td{border-right-style:solid !important;}[class~=clear-btn]{background-color:#f44336;}td{border-top-style:solid !important;}td{border-left-color:darkgray !important;}td{border-bottom-color:darkgray !important;}[class~=clear-btn]{color:white;}td{border-right-color:darkgray !important;}td{border-top-color:darkgray !important;}td{border-image:none !important;}td,th{padding-left:6pt;}td,th{padding-bottom:6pt;}[class~=row-button]{display:flex;}[class~=row-button]{justify-content:space-between;}th,td{padding-right:6pt;}td,th{padding-top:6pt;}[class~=row-button],body,input,[class~=calculator]{width:100%;}th,td{text-align:center;}th{background-color:#f2f2f2;}[class~=calculator]{background-color:WhiteSmoke;}body{background-color:white;}[class~=calculator]{padding-left:.625pc;}body{padding-left:0;}body{padding-bottom:0;}body{padding-right:0;}input,[class~=calculator]{padding-bottom:.625pc;}body{padding-top:0;}body{height:auto;}h1{line-height:1.5;}h1{margin-bottom:0pt !important;}input,[class~=calculator]{padding-right:.625pc;}h1{margin-top:0pt !important;}h1{font-size:.208333333in !important;}h1{text-align:left;}label{font-size:larger;}label{display:block;}label{margin-bottom:5px;}[class~=calculator],input{padding-top:.625pc;}label{color:inherit;}input{flex:5;}[class~=calculator]{border-radius:7.5pt;}input{padding-left:.625pc;}[class~=calculator]{max-width:375pt;}[class~=calculator]{margin-left:auto;}[class~=calculator]{margin-bottom:auto;}[class~=calculator]{margin-right:auto;}[class~=calculator]{margin-top:auto;}input{border-left-width:.75pt !important;}input{border-bottom-width:.75pt !important;}input{border-right-width:.75pt !important;}input{border-top-width:.75pt !important;}input{border-left-style:solid !important;}input{border-bottom-style:solid !important;}input{border-right-style:solid !important;}input{border-top-style:solid !important;}input{border-left-color:darkgray !important;}input{border-bottom-color:darkgray !important;}input{border-right-color:darkgray !important;}input{border-top-color:darkgray !important;}input{border-image:none !important;}input{border-radius:5px;}[class~=clear-btn]:hover{background-color:#e53935;}


    </style>
</head>
<body>

<div class="calculator">
    <h2>Mortgage Calculator</h2>
    <div class="form-group">
        <label for="propertyPrice">Property Price ($)</label>
        <input id="propertyPrice" type="number" placeholder="Enter property price" required>
    </div>
    <div class="form-group">
        <label for="downPayment">Down Payment ($)</label>
        <input id="downPayment" type="number" placeholder="Enter down payment" required>
    </div>
    <div class="form-group">
        <label for="loanTerm">Loan Term</label>
        <div style="display: flex; gap: 10px;">
            <input id="loanTerm" type="number" placeholder="Enter term" required style="flex: 2;">
            <select id="termUnit" style="flex: 1;">
                <option value="years">Years</option>
                <option value="months">Months</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="interestRate">Annual Interest Rate (%)</label>
        <input id="interestRate" type="number" placeholder="Enter interest rate" required>
    </div>
    <div class="class-group">
        <label for="propertyTax">Annual Property Tax ($)</label>
        <input id="propertyTax" type="number" placeholder="Enter property tax" required>
    </div>
    <!-- Buttons aligned in one row -->
    <div class="row-button">
        <button class="calculate-btn" onclick="calculateMortgage()">Calculate</button>
        <button class="clear-btn" onclick="clearFields()">Clear</button>
    </div>
</div>

<div class="result" id="result"></div>
  <br>
<div class="amortization-section" id="amortizationSection" style="display: none;">
    <h3>Amortization Schedule</h3>
    <table>
        <thead>
        <tr>
            <th>Payment #</th>
            <th>Principal</th>
            <th>Interest</th>
            <th>Remaining Balance</th>
        </tr>
        </thead>
        <tbody id="amortizationTable">
        <!-- Amortization data will be inserted here -->
        </tbody>
    </table>
</div>

<script>
    function calculateMortgage() {
        const propertyPrice = parseFloat(document.getElementById("propertyPrice").value);
        const downPayment = parseFloat(document.getElementById("downPayment").value);
        const interestRate = parseFloat(document.getElementById("interestRate").value) / 100 / 12; // Monthly interest rate
        let loanTerm = parseInt(document.getElementById("loanTerm").value);
        const termUnit = document.getElementById("termUnit").value;
        const propertyTax = parseFloat(document.getElementById("propertyTax").value) / 12; // Monthly property tax

        if (
            isNaN(propertyPrice) || isNaN(downPayment) || isNaN(interestRate) ||
            isNaN(loanTerm) || isNaN(propertyTax) || propertyPrice <= 0 || 
            downPayment < 0 || interestRate <= 0 || loanTerm <= 0 || propertyTax < 0
        ) {
            alert("Please enter valid values for all fields.");
            return;
        }

        const loanAmount = propertyPrice - downPayment;

        if (termUnit === "years") {
            loanTerm = loanTerm * 12;
        }

        const monthlyPrincipalInterest = (loanAmount * interestRate) / (1 - Math.pow(1 + interestRate, -loanTerm));
        const monthlyInstallment = monthlyPrincipalInterest + propertyTax;
        const totalPayment = monthlyInstallment * loanTerm;
        const totalInterest = totalPayment - propertyPrice - (propertyTax * loanTerm);

        document.getElementById("result").innerHTML = `
            <p>Monthly Installment (Including Tax): $ ${monthlyInstallment.toFixed(2)}</p>
            <p>Total Payment: $ ${totalPayment.toFixed(2)}</p>
            <p>Total Interest: $ ${totalInterest.toFixed(2)}</p>
        `;

        generateAmortizationSchedule(loanAmount, interestRate, monthlyPrincipalInterest, loanTerm);
    }

    function generateAmortizationSchedule(loanAmount, interestRate, monthlyPayment, loanTerm) {
        const amortizationTable = document.getElementById("amortizationTable");
        amortizationTable.innerHTML = '';
        let remainingBalance = loanAmount;

        for (let i = 1; i <= loanTerm; i++) {
            const interestPayment = remainingBalance * interestRate;
            const principalPayment = monthlyPayment - interestPayment;
            remainingBalance -= principalPayment;

            const row = `
                <tr>
                    <td>${i}</td>
                    <td>$ ${principalPayment.toFixed(2)}</td>
                    <td>$ ${interestPayment.toFixed(2)}</td>
                    <td>$ ${remainingBalance.toFixed(2)}</td>
                </tr>
            `;
            amortizationTable.innerHTML += row;
        }

        document.getElementById("amortizationSection").style.display = "block";
    }

    function clearFields() {
        document.getElementById("propertyPrice").value = '';
        document.getElementById("downPayment").value = '';
        document.getElementById("loanTerm").value = '';
        document.getElementById("termUnit").value = 'years';
        document.getElementById("interestRate").value = '';
        document.getElementById("propertyTax").value = '';
        document.getElementById("result").innerHTML = '';
        document.getElementById("amortizationTable").innerHTML = '';
        document.getElementById("amortizationSection").style.display = "none";
    }
  
  
  
  
</script>
  
  

  

</body>
</html>