<!doctypehtml><!-- Mortgage Calculator By Fullintro - https://fullintro.com --><html lang=en><meta charset=UTF-8><meta content="width=device-width,initial-scale=1"name=viewport><meta content="ie=edge"http-equiv=X-UA-Compatible><link crossorigin=anonymous href=https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css integrity=sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO rel=stylesheet><link crossorigin=anonymous href=https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css integrity=sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN rel=stylesheet><title>Mortgage Calculator</title><style>#loading,#results{display:none}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{background-color:#fff;outline:0;box-shadow:none;border-color:#ced4da}.container{max-width:1150px}.card{background-color:#f0f0f0;border:6px solid #bfbfbf;border-radius:10px;margin-top:0!important}.btn{background-color:#1cab26!important;color:#fff!important;border-color:#1cab26!important;box-shadow:none!important;border-radius:5px;font-size:24px;margin-bottom:-15px;font-family:Arial}.btn:hover{background-color:#1cab26!important;color:#fff!important;border-color:#1cab26!important;box-shadow:none!important}.btn:focus{outline:0!important;box-shadow:none!important}.btn:active{background-color:#1cab26!important;color:#fff!important;border-color:#1cab26!important;box-shadow:none!important}#results .btn{background-color:#1cab26!important;color:#fff!important;border-color:#1cab26!important}</style><body class=bg-white><div class=container><div class=row><div class="col-md-8 mx-auto"><div class="card card-body mt-5 text-center"><form id=mortgage-form><div class="form-group input-group"><div class=input-group-prepend><span class=input-group-text>$</span></div><input class=form-control id=principal placeholder="Loan Amount"type=number step=0.01 required></div><div class="form-group input-group"><div class=input-group-prepend><span class=input-group-text>%</span></div><input class=form-control id=annual-rate placeholder="Annual Interest Rate"type=number step=0.01 required></div><div class="form-group input-group"><div class=input-group-prepend><span class=input-group-text>Year:</span></div><input class=form-control id=years placeholder="Loan Term"type=number step=1><div class=input-group-prepend><span class=input-group-text>Month:</span></div><input class=form-control id=months placeholder="Loan Term"type=number step=1></div><div class="form-group input-group"><div class=input-group-prepend><span class=input-group-text>Down Payment:</span></div><select class=form-control id=down-payment-type style=width:5rem><option value=amount>Fixed Amount<option value=percent>Percentage</select><div class=input-group-prepend><span class=input-group-text id=down-payment-symbol>$</span></div><input class=form-control id=down-payment placeholder="Down Payment"type=number step=0.01 required style=width:9rem></div><div class="form-group input-group"><div class=input-group-prepend><span class=input-group-text>Loan Start Date:</span></div><input class=form-control id=start-date placeholder="Select Start Date"type=date required></div><div class=form-group><input class="btn btn-block btn-dark"type=submit value=Calculate></div></form><div id=loading><br><h4 style=color:#444;font-family:Arial>Calculating...</h4></div><div class=pt-4 id=results><h5 style=color:#444><b>MORTGAGE</b></h5><br><div class="form-group input-group"><div class=input-group-append><span class=input-group-text>Monthly Payment</span></div><input class=form-control id=monthly-payment disabled></div><div class="form-group input-group"><div class=input-group-prepend><span class=input-group-text>Total Payment</span></div><input class=form-control id=total-payment disabled></div><div class="form-group input-group"><div class=input-group-prepend><span class=input-group-text>Total Interest</span></div><input class=form-control id=total-interest disabled></div><h5 class=mt-4><strong>Amortization Schedule</h5><br><h6><b>Monthly Schedule</b></h6><div class=table-responsive id=monthly-schedule></div><h6><b>Annual Schedule</b></h6><div class=table-responsive id=annual-schedule></div></div></div></div></div></div><script>document.getElementById('mortgage-form').addEventListener('submit',function(e){e.preventDefault();document.getElementById('results').style.display='none';document.getElementById('loading').style.display='block';setTimeout(calculateMortgage,2000)});document.getElementById('down-payment-type').addEventListener('change',function(){const symbol=this.value==='percent'?'%':'$';document.getElementById('down-payment-symbol').textContent=symbol});function calculateMortgage(){const UIprincipal=document.getElementById('principal');const UIannualRate=document.getElementById("annual-rate");const UIyears=document.getElementById("years");const UImonths=document.getElementById("months");const UIdownPaymentType=document.getElementById("down-payment-type");const UIdownPayment=document.getElementById("down-payment");const UIstartDate=document.getElementById("start-date");const UImonthlyPayment=document.getElementById("monthly-payment");const UItotalPayment=document.getElementById("total-payment");const UItotalInterest=document.getElementById("total-interest");const principal=parseFloat(UIprincipal.value);const annualRate=parseFloat(UIannualRate.value)/100;const monthlyRate=annualRate/12;const years=parseFloat(UIyears.value)||0;const months=parseFloat(UImonths.value)||0;const totalPayments=(years*12)+months;const startDate=new Date(UIstartDate.value);if(isNaN(startDate.getTime())){showError('Please select a valid start date');return}
let downPayment=parseFloat(UIdownPayment.value);if(UIdownPaymentType.value==='percent'){downPayment=(principal*downPayment)/100}
const loanAmount=principal-downPayment;const x=Math.pow(1+monthlyRate,totalPayments);const monthly=(loanAmount*monthlyRate*x)/(x-1);if(principal<=0||annualRate<=0||totalPayments<=0||loanAmount<=0){showError('Please enter valid, positive values for all fields')}else if(isFinite(monthly)){UImonthlyPayment.value=`$${monthly.toFixed(2)}`;UItotalPayment.value=`$${(monthly * totalPayments).toFixed(2)}`;UItotalInterest.value=`$${((monthly * totalPayments) - loanAmount).toFixed(2)}`;displayAmortizationSchedule(startDate,monthly,monthlyRate,loanAmount,totalPayments);document.getElementById('results').style.display='block';document.getElementById('loading').style.display='none'}}
function displayAmortizationSchedule(startDate,monthly,monthlyRate,loanAmount,totalPayments){let schedule=[];let balance=loanAmount;let paymentDate=new Date(startDate);let annualSchedule=[];let annualPrincipal=0;let annualInterest=0;let previousYear=paymentDate.getFullYear();for(let i=1;i<=totalPayments;i++){const interest=balance*monthlyRate;const principal=monthly-interest;balance-=principal;schedule.push({paymentNumber:i,paymentDate:paymentDate.toLocaleDateString(),principal:principal.toFixed(2),interest:interest.toFixed(2),balance:balance.toFixed(2),});if(paymentDate.getFullYear()!==previousYear){annualSchedule.push({year:previousYear,principal:annualPrincipal.toFixed(2),interest:annualInterest.toFixed(2),balance:balance.toFixed(2),});annualPrincipal=0;annualInterest=0;previousYear=paymentDate.getFullYear()}
annualPrincipal+=principal;annualInterest+=interest;paymentDate.setMonth(paymentDate.getMonth()+1)}
annualSchedule.push({year:previousYear,principal:annualPrincipal.toFixed(2),interest:annualInterest.toFixed(2),balance:balance.toFixed(2),});const monthlySchedule=schedule.map(payment=>`<tr>
            <td>${payment.paymentNumber}</td>
            <td>${payment.paymentDate}</td>
            <td>$${payment.principal}</td>
            <td>$${payment.interest}</td>
            <td>$${payment.balance}</td>
        </tr>`).join('');document.getElementById('monthly-schedule').innerHTML=`
        <table class="table table-bordered amortization-table">
            <thead>
                <tr>
                    <th>Month</th>
                    <th>Date</th>
                    <th>Principal</th>
                    <th>Interest</th>
                    <th>Balance</th>
                </tr>
            </thead>
            <tbody>${monthlySchedule}</tbody>
        </table>
    `;const annualScheduleTable=annualSchedule.map(year=>`<tr>
            <td>${year.year}</td>
            <td>$${year.principal}</td>
            <td>$${year.interest}</td>
            <td>$${year.balance}</td>
        </tr>`).join('');document.getElementById('annual-schedule').innerHTML=`
        <table class="table table-bordered amortization-table">
            <thead>
                <tr>
                    <th>Year</th>
                    <th>Principal</th>
                    <th>Interest</th>
                    <th>Balance</th>
                </tr>
            </thead>
            <tbody>${annualScheduleTable}</tbody>
        </table>
    `}
function showError(error){document.getElementById('loading').style.display='none';alert(error)}</script><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8iR2wMZ3PO7Q7hxRT8k7fdtmQNmNSYhxN02faE99lkldk53kd8lff4Zy8Gp59Kd" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-Hc3HkDJtAxyfpL9lCp9Oa7lGpOW03eHePl8hjmA29kKNbkzPxtA" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-Ch6qOCH9Fc9vYIScXoe93lBQt7LoFJg4kUJcmtRzW4yglSzMyX0N7jpS7kqH3c9R" crossorigin="anonymous"></script><!-- Right Click Disable --><script>document.addEventListener('contextmenu',function(event){event.preventDefault()});</script><!-- IFrame Setup --><script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script></body></html>