Pages

Wednesday 21 October 2015

Recurring Deposite Calculator using AngularJs and HTML5

Here I have created Recurring Deposit Calculator using angularjs and HTML5

&lt!DOCTYPE html&gt
&lthtml&gt
&lthead&gt

&ltscript 
src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt
&lt/script&gt

&ltlink rel="stylesheet" 
 href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt

&ltstyle&gt
#tbl ,th, td {
  border: 1px solid grey;

  padding: 5px;
}
#tbl 
{
   width:100%;
}

div 
{
 margin:5%;
 width:500px;
}


.label
{
   background-color: #707070;
}

#tbl tr:nth-child(odd) {
  background-color: #f1f1f1;
}
#tbl tr:nth-child(even) {
  background-color: #ffffff;
}

fieldset.scheduler-border {
    border: 1px groove #ddd !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}

    legend.scheduler-border {
        font-size: 1.2em !important;
        font-weight: bold !important;
        text-align: left !important;
        width:auto;
        padding:0 10px;
        border-bottom:none;
    }
&lt/style&gt

&lt/head&gt

&ltbody&gt

&ltdiv  ng-app="myApp"  ng-controller="rdCtrl"&gt
&ltfieldset class="scheduler-border"&gt
&ltlegend class="scheduler-border"&gtRd Calculator&lt/legend&gt
&ltform name="myForm" step="any" ng-model="formModel" 
ng-submit="Calculate()" &gt 
&lttable&gt
&lttr&gt
&lttd&gtMonthly Installment(R) :&lt/td&gt
&lttd&gt&ltinput type="number" step="any" class="form-control" 
name="rdamount" ng-model="rdamount" required&gt&lt/td&gt
&lt/tr&gt
&lttr&gt
&lttd&gtRate of Interest :&lt/td&gt
&lttd&gt&ltinput type="number" step="any" class="form-control" 
name="interestrate" ng-model="interestrate" required&gt&lt/td&gt
&lt/tr&gt
&lttr&gt
&lttd&gtNumber of Months(n)  : &lt/td&gt
&lttd&gt
&ltselect name="rdperiod" class="form-control" ng-model="rdperiod" &gt 
 &ltoption data-ng-repeat="month in months" value="{{month.value}}"&gt
{{month.text}}
&lt/option&gt
&lt/select&gt
&lt/td&gt
&lt/tr&gt
&lttr&gt
&lttd&gtMaturity : &lt/td&gt
&lttd&gt{{rdmaturity | number:2}}&lt/td&gt
&lt/tr&gt
&lttr&gt
&lttd colspan="2"&gt
&ltinput type="submit" class="form-control btn btn-info" &gt
&lt/td&gt
&lt/tr&gt
&lt/table&gt
&lt/form&gt
 &lt/fieldset&gt
&lt/div&gt
&lt/body&gt
&lt/html&gt

&ltscript&gt

var app = angular.module('myApp', []);

app.controller('rdCtrl', function($scope) {
/****Initialisation at start ********/
 $scope.rdamount= 3000;
 $scope.interestrate = 8.7;
 $scope.rdperiod = 3;

$scope.Calculate = function() { 
 $scope.interestrate1=$scope.interestrate/400;
 $scope.quarter=$scope.rdperiod/3;
 $scope.rdmaturity=
 ($scope.rdamount*[ (Math.pow((1+$scope.interestrate1),$scope.quarter))-1])/
( 1- Math.pow((1+$scope.interestrate1),-1/3));
       }

$scope.months=[];

for(i=3;i&lt=120;i=i+3)
$scope.months.push({value:i,text:i});

});
&lt/script&gt

No comments:

Post a Comment