Skip to content

Instantly share code, notes, and snippets.

@nithesh1992

nithesh1992/Mortgage.vfp

Created May 14, 2017 05:32
Show Gist options
  • Save nithesh1992/a82bfa9faf5a41629909dedfdffab6cd to your computer and use it in GitHub Desktop.
Save nithesh1992/a82bfa9faf5a41629909dedfdffab6cd to your computer and use it in GitHub Desktop.
Download ZIP
Mortgage Calculator template in Visualforce (In lightning style)
Raw
Mortgage.vfp
<apex:page showHeader="false" sidebar="false">
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<apex:slds /> <!-- SLDS style sheet -->
</head>
<body>
<div class="slds-scope">
<div class="slds-page-header">
<div class="slds-grid">
<div class="slds-col">
<h1 class="slds-page-header__title" title="Review"> Mortgage Calculator</h1>
</div>
</div>
</div>
<br/>
<div class="slds-p-horizontal--small slds-grid">
<div class="slds-form--stacked">
<div class="slds-form-element">
<label class="slds-form-element__label" for="inputSample2">Loan Amount:</label>
<div class="slds-form-element__control">
<input type="text" id="inputSample2" class="slds-input" placeholder="" onchange="calc()" />
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="inputSample2">APR %</label>
<div class="slds-form-element__control">
<input type="text" id="inputSample3" class="slds-input" placeholder="" onchange="calc()" />
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="inputSample2">Term</label>
<div class="slds-form-element__control">
<input type="text" id="inputSample4" class="slds-input" placeholder="" onchange="calc()" />
</div>
</div>
</div>
</div>
<br/>
<div class="slds-tile slds-m-horizontal--small">
<div class="slds-media__body">
<div class="slds-tile__detail slds-text-body--small">
<dl class="slds-list--horizontal slds-wrap">
<dt class="slds-item--label slds-text-color--weak slds-truncate" title="First Label">Monthly Payment :</dt>
<dd class="slds-item--detail slds-truncate" id ="MonthlyPayment" ></dd>
<dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Number of Payments :</dt>
<dd class="slds-item--detail slds-truncate" id="NumPayments"></dd>
<dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Total Interest :</dt>
<dd class="slds-item--detail slds-truncate" id="TotalInterest"></dd>
</dl>
</div>
</div>
</div>
</div>
<script>
function calc() {
var loanAmount = document.getElementById("inputSample2").value;
var APR = document.getElementById("inputSample3").value;
var term = document.getElementById("inputSample4").value;
var numOfPays = term*12;
var interest = APR/100/12;
document.getElementById("NumPayments").innerHTML = numOfPays; //Change it Accordingly
document.getElementById("TotalInterest").innerHTML = loanAmount*12; //Change it Accordingly
document.getElementById("MonthlyPayment").innerHTML =' $'+ ; //Change it Accordingly
}
</script>
</body>
</html>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment