EMI Calculator Component using Lightning

Hi All,

In this post I will tell you how to create EMI Calculator using Lightning Component.

How to Use EMI Calculator?

Our EMI Calculator is easy to use, intuitive to understand and is quick to perform. You can calculate EMI for home loan, car loan, personal loan, education loan or any other fully amortizing loan using this calculator.

Enter the following information in the EMI Calculator:

  • Principal loan amount you wish to avail (rupees)
  • Loan term (months or years)
  • Rate of interest (percentage)
  • EMI in advance OR EMI in arrears (for car loan only)

Let’s walk through code.

EMICalculator.cmp :

<aura:component implements="force:appHostable,force:hasRecordId,force:hasSObjectName,flexipage:availableForAllPageTypes">
    <ltng:require styles="/resource/SLDS/assets/styles/salesforce-lightning-design-system-vf.css"/>
    
    <div class="slds">
        <div class="slds-page-header">
            <div class="slds-grid">
                <div class="slds-col slds-has-flexi-truncate">
                    <div class="slds-media">
                        <div class="slds-media__figure">
                            <c:svgIcon svgPath="/resource/SLDS/assets/icons/standard-sprite/svg/symbols.svg#process" category="standard" size="large" name="user" />
                        </div>
                        <div class="slds-media__body">
                            <p class="slds-text-heading--label">Calculator</p>
                            <div class="slds-grid">
                                <h1 class="slds-text-heading--medium slds-m-right--small slds-truncate slds-align-middle">Calculate Your EMI</h1>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /slds-col-->                        
            </div>   
            <!-- /slds-grid-->                 
        </div>
        <!-- /slds-page-header-->
        <div class="container">
            <div class="slds-grid slds-m-top--medium slds-wrap">
                <div class="slds-col--padded slds-size--1-of-1">
                    <div id="err" style="display:none;" class="slds-notify slds-notify--alert slds-theme--error slds-theme--alert-texture" role="alert">
                        <h2>Please fill all Information</h2>
                    </div>
                    
                    <div class="slds-form--stacked">
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" >Loan Amount</label>
                            <div class="slds-form-element__control">
                                <input id="loanAmt" class="slds-input" type="text"  required="" />
                            </div>
                        </div>
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" >Loan Tenure (Months)</label>
                            <div class="slds-form-element__control">
                                <input id="months" class="slds-input" type="text" required="" />
                            </div>
                        </div>
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" >Interest Rate</label>
                            <div class="slds-form-element__control">
                                <input id="rate" class="slds-input" type="text" required="" />
                            </div>
                        </div>
                        <div class="slds-form-element slds-m-bottom--medium ">
                            <ui:button label="Submit" press="{!c.getEMIDetail}"/> &nbsp;
                            <ui:button label="Reset" press="{!c.reset}"/>   &nbsp;
                            <ui:button label="Monthly Detail" press="{!c.getEMIMonthly}"/><br/>                            
                        </div>                        
                    </div>
                </div>
                
                <div class="slds-col--padded slds-size--1-of-1 " >
                    <div id="emiDiv" style="display:none;">
                        <div class="slds-form-element">
                            <span class="slds-form-element__label">EMI</span>
                            <div class="slds-form-element__control">
                                <span class="slds-form-element__static"><div id="EMI"></div></span>
                            </div>
                        </div>
                        <div class="slds-form-element">
                            <span class="slds-form-element__label">Interest Payable</span>
                            <div class="slds-form-element__control">
                                <span  class="slds-form-element__static"><div id="interestP"></div></span>
                            </div>
                        </div>
                        <div class="slds-form-element">
                            <span class="slds-form-element__label">Total Payable</span>
                            <div class="slds-form-element__control">
                                <span  class="slds-form-element__static"><div id="totalP" ></div></span>
                            </div>
                        </div>
                    </div>
                    <div id="addchart" class="slds-scrollable--y" style="display:none; max-height: 280px;"></div>
                </div>                
            </div>
            
                        
        </div>        
    </div>    
</aura:component>

EMICalculatorController.js:

({
    getEMIDetail : function(component, event, helper) {
        helper.getEMI(component, "EMI");
    },
    getEMIMonthly : function(component, event, helper) {
        helper.getEMI(component, "Monthly");
    },
    reset : function(component, event, helper) {
        document.getElementById("emiDiv").style.display = "none";
        document.getElementById("addchart").style.display = "none";
        document.getElementById('loanAmt').value="";
        document.getElementById('months').value="";
        document.getElementById('rate').value="";
    },    

})

EMICalculatorHelper.js :

({
	getEMI : function(component, detail) {
        if(detail =="EMI"){
            document.getElementById("emiDiv").style.display = "block";
            document.getElementById("addchart").style.display = "none";
        }else if(detail =="Monthly"){
            document.getElementById("emiDiv").style.display = "none";
            document.getElementById("addchart").style.display = "block";
        }
		var loanAmt = document.getElementById('loanAmt').value;
        var months = document.getElementById('months').value;
        var rate = document.getElementById('rate').value;
        
        if (loanAmt == null || loanAmt.length == 0 || months == null || months.length == 0 || rate == null || rate.length == 0) {
            document.getElementById("err").style.display = "block";            
        } else {
            document.getElementById("err").style.display = "none";                           
            var rate1 = rate / 1200;
            var emi= loanAmt * rate1 / (1 - (Math.pow(1 / (1 + rate1), months)));//Math.round(loanAmt * rate1 / (1 - (Math.pow(1 / (1 + rate1), months))) * 100) / 100;
            document.getElementById('EMI').innerHTML = Math.round(emi);
            document.getElementById('interestP').innerHTML = Math.round(emi * months) ;//Math.round((emi * months)) ;
            document.getElementById('totalP').innerHTML = Math.round((document.getElementById('interestP').innerHTML) * 1 - loanAmt * 1);//Math.round(((document.getElementById('interestP').innerHTML) * 1 - loanAmt * 1) * 100) / 100;
            
            var tile='<ul class="slds-list--vertical slds-has-cards">';
            var balance=0;
            for(i=1; i<=months; i++){                    
                if(i==1){
                    balance = loanAmt;                       
                }                       
                var interest = balance* (rate/100.0)/12;//(Math.round((balance* (rate/100.0)/12)*100)/100).toFixed(2);
                var Principal = emi - interest;//(Math.round((emi - interest)*100)/100).toFixed(2);
                balance = balance - Principal;//(Math.round((balance - Principal)*100)/100).toFixed(2);
                
                tile += '<li class="slds-list__item">';
                tile += '<div class="slds-tile slds-tile--board">';
                tile += '<p class="slds-tile__title slds-truncate"><a href="#">Month - '+ i +' </a></p>';
                tile += '<div class="slds-tile__detail">';
                tile += '<p class="slds-text-heading--medium">Installment - '+ Math.round(emi) +'</p>';
                tile += '<p class="slds-truncate"><a href="#">Interest - '+ Math.round(interest) +'</a></p>';
                tile += '<p class="slds-truncate">Princple - '+ Math.round(Principal) +'</p>';
                tile += '<p class="slds-truncate">Balance - '+ Math.round(balance) +'</p>';
                tile += '</div>';
                tile += '</div>';
                tile += '</li>';
            }
            tile += '</ul>';
            document.getElementById("addchart").innerHTML = tile;            
        }	
	}
})

EMICalculator.css

.THIS .slds-list__item{
    width: 300px;
    float: left;
    margin: 4px!important;
}

Your final result will look like this.

Thanks

Advertisements