Create Professional & Accurate Loan Calculator With Javascript

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>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.