Hi peeps! Do you know that mortgage calculator or loan calculators are the most essential thing in a bank? As you know that millions of people take loans every day? So, why not create a loan calculator for them. Don’t get panic if you are new to codes as I will help you to make pro & 100% accurate mortgage calculator along with source codes.
Requirement:
- A PC or android phone where code editor can be installed.
- Good code editor, we recommend Vs code or Atom for PC & for mobile you can use Acode.
- Lastly, obviously your focus.
Key Features of Source Code:
- 100 % accurate
- Mobile responsive
- Simple configuration for users
- Easy to understand codes
Loan Calculator Source Codes:
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Build a Simple Mortgage Calculator</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="UTF-8" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" href="speedo.png" sizes="any" type="image/svg+xml"> <meta name="theme-color" content="#141526"> <meta name="description" content="A simple & free mortgage calculator which show accurate value of your monthly or yearly loan rates"> <meta name="keywords" content="loan calculator, free loan calculator , Accurate Loan Calculator, Best loan calculator, Top loan calculator, Mortgage Calculator, Best Mortgage Calculator "> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" /> <!--Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <!-- Font Awesome --> <script src="https://kit.fontawesome.com/996973c893.js" crossorigin="anonymous" ></script> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <style> body { margin: 0; font-family: "courier", cursive ; font-size: 18px; background-color:#fff; } </style> </head> <body> <!-- partial:index.partial.html --> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3" align="center"> <a href="https://thecodezine.com" class="active"> <img border="0" src="loan.png" alt="Free Loan Calculator Code" style="width:100px;height:100px;"></a> <div id="calculator" align="center"></div> <hr> <div class="text center text-center bg-dark "> <strong><p class="text-danger">* Are you Interested to <a href="https://thecodezine.com">build Mortgage Calculator?</a> Go to <a href="https://thecodezine.com">The Codezine</a> for detailed source codes & tutorial</p></strong> </div> </div> </div> </div> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script> ;(function($){ $.fn.homenote = function(options){ var settings = $.extend({ currencysym : '₹', currency : 'Rupees', termtype : "years", // years or months term : "30", principal : "250,000", dptype : 'percentage', // percentage or downlump dpamount : '20%', rate : '6.5', resulttext : 'Your monthly payment:' }, options ); options = $.extend(settings, options); // Change the term type between years and months $(document).on('change', 'input[name="termtype"]', function(){ settings.termtype = $(this).val(); $('#term').val( convertTermLength() ); }); // Change the down type between lump sum and percentage $(document).on('change', 'input[name="dptype"]', function(){ settings.dptype = $(this).val(); $('#dpamount').val( convertDownPayment() ); }); // Perform the calculation $(document).on('click', '#calchomenote', function(e){ e.preventDefault(); $('#results').hide() .html(settings.resulttext + ' <strong>' + settings.currencysym + calculate() + '</strong>') .show(); }); /** * Converts down between percentate and lump sum */ function convertDownPayment() { var total = $('#purchasePrice').val().replace(/[^0-9\.]/g, ''); var amount = $('#dpamount').val().replace(/[^0-9\.]/g, ''); if ( settings.dptype === 'percentage' ){ return (amount / total) * 100 + '%'; } else { var perc = amount / 100; return total * perc; } } /** * Converts term between years and months */ function convertTermLength() { var term = $('#term').val(); return ( $('input:radio[name="termtype"]:checked').val() === 'months' ) ? term * 12 : term / 12; } /** * Returns total left on loan */ function amountLeft() { // Determine amount left on loan var type = $('input:radio[name="dptype"]:checked').val(); var total = $('#purchasePrice').val().replace(/[^0-9\.]/g, ''); var down = $('#dpamount').val().replace(/[^0-9\.]/g, ''); if ( type === 'percentage' ){ var percentage = down / 100; return total - (total * percentage); } else { return total - down; } } /** * Returns number of payments left */ function paymentsLeft() { var term = $('#term').val(); return ( $('input:radio[name="termtype"]:checked').val() === 'months' ) ? term : term * 12; } function calculate() { // Standard Mortgage Formula: // M = P[i(1+i)n] / [(1+i)n - 1] // x = (1+i)n var P = amountLeft(); var i = ($('#rate').val().replace(/[^0-9\.]/g, '') / 100) / 12; var n = paymentsLeft(); var x = Math.pow((1 + i ), n); var M = ( P * ((i * x) / (x - 1)) ).toFixed(2); return M; } function returnOutput() { // form to output var out = "<form id='homenote' role='form' class='well'>"; // Purchase Price out += "<div class='form-group'><label for='purchasePrice'>Loan Amount (" + settings.currencysym + ")</label>"; out += "<input type='text' class='form-control' id='purchasePrice' value='" + settings.principal + "'></div></hr>"; // Down Payment out += "<div class='form-group'><label for='downPayment'>Down Payment</label><input type='text' class='form-control' id='dpamount' value='" + settings.dpamount + "'></div>"; // Down Payment Type - Percentage out += "<label class='radio-inline'><input type='radio' name='dptype' id='downpercentage' value='percentage'"; if ( settings.dptype === 'percentage' ){ out += ' checked'; } out += ">Percent (%)</label>"; // Down Payment Type - Lump Sum out += "<label class='radio-inline'><input type='radio' name='dptype' id='downlump' value='downlump'"; if ( settings.dptype === 'downlump' ){ out += " checked"; } out += ">" + settings.currency + " (" + settings.currencysym + ")</label><hr>"; // Rate out += "<div class='form-group'><label for='rate'>Rate (%)</label><input type='text' class='form-control' id='rate' value='" + settings.rate + "'></div><hr>"; // Term out += "<div class='form-group'><label for='rate'>Term</label><input type='text' class='form-control' id='term' value='" + settings.term + "'></div>"; // Term in Years out += "<label class='radio-inline'><input type='radio' name='termtype' id='years' value='years' "; if ( settings.termtype === 'years' ){ out += 'checked'; } out += ">Years</label>"; // Term in Months out += "<label class='radio-inline'><input type='radio' name='termtype' id='months' value='months'"; if ( settings.termtype === 'months' ){ out += 'checked'; } out += ">Months</label><hr>"; // Resultss out += "<div class='alert alert-success' style='display:none;' id='results'></div>"; // Submit Button out += "<button type='submit' class='btn btn-danger btn-block' id='calchomenote'>Calculate</button></form>"; return out; } $(this).html(returnOutput()); }; }(jQuery)); $(document).ready(function(){ $('#calculator').homenote({ principal: '200,000', rate: '5.0' }); }); </script> <script src="jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { //Disable cut copy paste $('body').bind('cut copy paste', function (e) { e.preventDefault(); }); //Disable mouse right click $("body").on("contextmenu",function(e){ alert('Sorry Inspect not allowed!'); return false; }); }); </script> </body> </html>
