added some logic to calculate emi

techieshravan · May 25, 2016 · 6c4ee0d · 6c4ee0d
1 parent 9bb18b7
commit 6c4ee0d
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 7 deletions.
diff --git a/emi-calculator/src/app/emi-calculator.component.html b/emi-calculator/src/app/emi-calculator.component.html
@@ -1,3 +1,48 @@
-<h1>
- {{title}}
-</h1>
+<div class="container">
+ <h1>{{title}}</h1>
+ <hr/>
+ <form role="form" class="form-horizontal">
+ <div class="form-group">
+ <label class="col-md-2 control-label">Loan Amount</label>
+ <div class="col-md-8">
+ <div class="input-group">
+ <input type="text" class="form-control" placeholder="Loan Amount" [(ngModel)]="loanAmount">
+ <span class="input-group-addon">
+ <i class="fa fa-inr"></i>
+ </span>
+ </div>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-md-2 control-label">Interest Rate</label>
+ <div class="col-md-8">
+ <div class="input-group">
+ <input type="text" class="form-control" placeholder="Interest Rate" [(ngModel)]="interestRate">
+ <span class="input-group-addon bootstrap-touchspin-postfix">%</span>
+ </div>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-md-2 control-label">Loan Tenure (Months)</label>
+ <div class="col-md-8">
+ <input type="text" class="form-control" placeholder="Loan Tenure (Months)" [(ngModel)]="loanTenure">
+ <!--<div class="input-group">-->
+ <!---->
+ <!--</div>-->
+ </div>
+
+ </div>
+ <button (click)="calculateEmi()">Click Me</button>
+ </form>
+ <hr/>
+ <div class="row" *ngIf="emi">
+ <div class="col-xs-4">Loan EMI</div>
+ <div class="col-xs-4">Total Interest Payable</div>
+ <div class="col-xs-4">Total Payment (Principal + Interest)</div>
+ </div>
+ <div class="row" *ngIf="emi">
+ <div class="col-xs-4">{{emi}}</div>
+ <div class="col-xs-4">{{emi*loanTenure - loanAmount}}</div>
+ <div class="col-xs-4">{{emi*loanTenure}}</div>
+ </div>
+</div>
diff --git a/emi-calculator/src/app/emi-calculator.component.ts b/emi-calculator/src/app/emi-calculator.component.ts
@@ -7,5 +7,27 @@ import { Component } from '@angular/core';
  styleUrls: ['emi-calculator.component.css']
 })
 export class EmiCalculatorAppComponent {
- title = 'emi-calculator works test!';
+
+ title:string = 'EMI Calculator';
+ loanAmount: number = 1000000;
+ interestRate: number = 10.5;
+ loanTenure: number = 120;
+ emi: number;
+
+ calculateEmi() {
+
+ if(this.loanAmount && this.interestRate && this.loanTenure) {
+
+
+ let interestPerMonth = this.interestRate/12/100;
+
+ let numerator = Math.pow((1+interestPerMonth), this.loanTenure);
+
+ let denominator = numerator - 1;
+
+ this.emi = (this.loanAmount * interestPerMonth) * numerator/denominator;
+
+ console.log(this.emi);
+ }
+ }
 }
diff --git a/emi-calculator/src/index.html b/emi-calculator/src/index.html
@@ -2,19 +2,29 @@
 <html>
 <head>
  <meta charset="utf-8">
- <title>EmiCalculator</title>
+ <title>EMI Calculator</title>
  <base href="/">
 
  {{#unless environment.production}}
  <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
  {{/unless}}
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+ <link type='text/css' href='http:https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400italic,600' rel='stylesheet'>
+ <link type="text/css" href="assets/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <!-- Font Awesome -->
+ <link type="text/css" href="assets/fonts/themify-icons/themify-icons.css" rel="stylesheet"> <!-- Themify Icons -->
+ <link type="text/css" href="assets/css/styles.css" rel="stylesheet"> <!-- Core CSS with all styles -->
+
+ <link type="text/css" href="assets/plugins/codeprettifier/prettify.css" rel="stylesheet"> <!-- Code Prettifier -->
+ <link type="text/css" href="assets/plugins/iCheck/skins/minimal/blue.css" rel="stylesheet"> <!-- iCheck -->
+
+
 </head>
 <body>
  <emi-calculator-app>Loading...</emi-calculator-app>
 
- 
+
 
  {{#each scripts.polyfills}}<script src="{{.}}"></script>{{/each}}
  <script>
@@ -23,7 +33,7 @@
  }).catch(console.error.bind(console));
  </script>
 
- 
+