
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Advanced Loan Calculator</title>

    <style>
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>Advanced Loan Calculator</h2>

    <div class="form-group">

        <label for="loanAmount">Loan Amount ($)</label>

        <input value="5000" id="loanAmount" type="number" class="form-control" placeholder="Enter loan amount" required>

    </div>

    <div class="form-group">

        <label for="loanTerm">Loan Term</label>

        <div style="display: flex; gap: 10px;">

            <input value="1" id="loanTerm" type="number" class="form-control" placeholder="Enter term" required >

            <select id="termUnit" class="form-control" >

                <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 value="5" id="interestRate" type="number" class="form-control" placeholder="Enter interest rate" required>

    </div>

    <div class="form-group">

        <label for="compoundFrequency">Compound Frequency</label>

        <select id="compoundFrequency" class="form-control">

            <option value="12">Monthly</option>

            <option value="4">Quarterly</option>

            <option value="2">Semi-Annually</option>

            <option value="1">Annually</option>

        </select>

    </div>

    <div class="form-group">

        <label for="paymentFrequency">Payment Frequency</label>

        <select id="paymentFrequency" class="form-control">

            <option value="12">Monthly</option>

            <option value="4">Quarterly</option>

            <option value="2">Semi-Annually</option>

            <option value="1">Annually</option>

        </select>

    </div>

    <div class="row-button">

        <button class="calculate-btn" onclick="calculateLoan()">Calculate</button>

        <button class="clear-btn" onclick="clearFields()">Clear</button>

    </div>

</div>

<div class="result" id="result"></div>

<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 calculateLoan() {

        const loanAmount = parseFloat(document.getElementById("loanAmount").value);

        let loanTerm = parseFloat(document.getElementById("loanTerm").value);

        const termUnit = document.getElementById("termUnit").value;

        const interestRate = parseFloat(document.getElementById("interestRate").value) / 100;

        const compoundFrequency = parseInt(document.getElementById("compoundFrequency").value);

        const paymentFrequency = parseInt(document.getElementById("paymentFrequency").value);

        if (isNaN(loanAmount) || isNaN(loanTerm) || isNaN(interestRate)) {

            alert("Please enter valid inputs.");

            return;

        }

        if (termUnit === "years") {

            loanTerm *= paymentFrequency; // Convert years to payment periods

        }

        const effectiveRate = Math.pow(1 + interestRate / compoundFrequency, compoundFrequency / paymentFrequency) - 1;

        const payment = loanAmount * (effectiveRate / (1 - Math.pow(1 + effectiveRate, -loanTerm)));

        document.getElementById("result").innerHTML = `

            <p>Monthly Payment: $ ${payment.toFixed(2)}</p>

            <p>Total Payments: $ ${(payment * loanTerm).toFixed(2)}</p>

            <p>Total Interest: $ ${((payment * loanTerm) - loanAmount).toFixed(2)}</p>

        `;

        generateAmortizationSchedule(loanAmount, effectiveRate, payment, loanTerm);

    }

    function generateAmortizationSchedule(loanAmount, interestRate, payment, loanTerm) {

        const amortizationTable = document.getElementById("amortizationTable");

        amortizationTable.innerHTML = '';

        let remainingBalance = loanAmount;

        for (let i = 1; i <= loanTerm; i++) {

            const interestPayment = remainingBalance * interestRate;

            const principalPayment = payment - interestPayment;

            remainingBalance -= principalPayment;

            const row = `

                <tr>

                    <td>${i}</td>

                    <td>$ ${principalPayment.toFixed(2)}</td>

                    <td>$ ${interestPayment.toFixed(2)}</td>

                    <td>$ ${Math.max(remainingBalance, 0).toFixed(2)}</td>

                </tr>

            `;

            amortizationTable.innerHTML += row;

        }

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

    }

    function clearFields() {

        document.getElementById("loanAmount").value = '';

        document.getElementById("loanTerm").value = '';

        document.getElementById("termUnit").value = 'years';

        document.getElementById("interestRate").value = '';

        document.getElementById("compoundFrequency").value = '12';

        document.getElementById("paymentFrequency").value = '12';

        document.getElementById("result").innerHTML = '';

        document.getElementById("amortizationTable").innerHTML = '';

        document.getElementById("amortizationSection").style.display = 'none';

    }

</script>

</body>

</html>