client-ui
Version:
Testing implementation of nodeJs Backend, angular frontend, and hopefully in a way that this can be deployed to s3/cloudfront
139 lines (127 loc) • 6.87 kB
HTML
<div class="container-fluid">
<div class="row">
<head>
<title>Simple and Easy Loan Payment Calculator RocketLoans</title>
<meta name="description" content="Use our free and easy-to-use Simple Loan Calculator to easily figure out your monthly payments on a fixed rate loan.">
</head>
<div id="loanCalculator">
<h2>Simple Loan Calculator</h2>
<p>You can use our Simple Loan Calculator to help you figure out your monthly payments on a fixed rate loan. <br> You can use this calculator for any type of loan you wish to model by filling in <strong>3 of the 4</strong> fields below with your details.<br><em> Please note that this calculator is provided as a simple tool for you to use and does not represent an offer of credit.</em></p>
<div class="row">
<form id="form" role="form" focus-error="true" ng-submit="validation()" novalidate>
<div class="form-group col-md-2">
<label for="loanAmount">Loan Amount</label>
<div class="input-group">
<span class="input-group-addon" id="loanAmount-addon">$</span>
<input type="number" id="loanAmount" placeholder="" class="form-control"
ng-model="loanAmountEntry"
ng-min="0"/>
</div>
</div>
<div class="form-group col-md-2">
<label for="interestRateEntry">Interest Rate</label>
<div class="input-group">
<input type="number" id="interestRateEntry" placeholder="" class="form-control"
ng-model="interestRateEntry"
ng-min="0"/>
<span class="input-group-addon" id="interestRate-addon">%</span>
</div>
</div>
<div class="form-group col-md-2">
<label for="term">Term</label>
<div class="input-group">
<input type="number" id="term" placeholder="" class="form-control"
ng-model="termEntry"
ng-min="0"/>
<span class="input-group-addon">Months</span>
</div>
</div>
<div class="form-group col-md-2">
<label for="payment" >Payment/Month</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" id="payment" class="form-control" placeholder="(Optional)"
ng-model="pmtPerMonthEntry"/>
</div>
</div>
<div class="form-group col-md-2">
<label for="originFee">Origination Fee</label>
<div class="input-group">
<span class="input-group-addon" id="originFee-addon">$</span>
<input type="number" id="originFee" placeholder="(Optional)" class="form-control"
ng-model="originFeeEntry"/>
</div>
</div>
<div class="form-group col-md-2" id="submitFormDiv" style="margin-top: 38px">
<button type="submit" class="btn btn-success" id="submitForm">Calculate</button>
</div>
</form>
</div>
<div class="alert alert-warning" ng-if="validNumberError">
{{validNumberError}}
</div>
<hr>
<div class="row">
<div class="col-md-3">
<form>
<div class="form-group" ng-show="calculated">
<label for="resultAPR">APR</label>
<div class="input-group">
<input id="resultAPR" class="form-control noFocus" ng-value="APROutput" readonly/>
<span class="input-group-addon">%</span>
</div>
</div>
<div class="form-group" ng-show="calculated">
<label for="resultTotal">Total Payment</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input id="resultTotal" class="form-control noFocus" ng-value="totalOutput" readonly>
</div>
</div>
</form>
</div>
<div class="col-md-3">
<form>
<div class="form-group" ng-show="calculated">
<label for="resultInterest">Total Interest</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input id="resultInterest" class="form-control noFocus" ng-value="interestRatePayment" readonly>
</div>
</div>
<div class="form-group" ng-show="calculated">
<label for="resultPrincipal">Principal</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input id="resultPrincipal" class="form-control noFocus" ng-value="principalOutput" readonly>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<div class="col-xs-12">
<div class="row">
<canvas id="pieChart"></canvas>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<table id="amort" class="table table-condensed" style="display:none">
<thead>
<!-- <th>Period</th> -->
<th>Date</th>
<th>Payment</th>
<th>Principal</th>
<th>Interest</th>
<th>Total Interest</th>
<th>Balance</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>