Fixed And Reducing Interest Loan Estimator
The Olympus Bank requires a Fixed and Reducing Interest Loan Estimator for the ease of it’s customers. The customers are asked to fill a form regarding their loan details. The customers can know about the Total Payment, Total Interest and the Monthy EMI to be paid for the loan taken based on both the Fixed and Reducing Interest.
Concept covered: JavaScript Deep Dive – Math, number, function
The following are the screenshots for Fixed And Reducing Interest Loan Estimator
Use the Label Name and the Component Id as given. The Component Id can be given in any case (Upper case or Lower case or Mixed case).All the necessary attributes for the Components should be given.
The Component Id should be specified for each HTML Component. If the Component Id is not provided for a HTML component, the marks will not be provided for this component.
All Tags, Elements and Attributes should conform to HTML5 Standards. All the fields are mandatory.
Provide the details as given in the table below.
SOLUTION:
ReducedInterestEstimate.html<html lang="en">
<head>
<title>Reducing Interest Loan Estimation</title>
<style type="text/css">
h2 {
text-align: center;
color: #FF0000;
font-style: italic;
font-weight: bold;
}
table {
text-align: left;
background-color: #FFE77A;
padding: 10px;
}
thead {
text-align: center;
}
#tablemain {
margin-left: 35%;
}
#Estimate {
background-color: #F1F334;
color: #000000;
font-size: 15px;
height: 35px;
width: 100px;
}
</style>
</head>
<body>
<h2>Reducing Interest Loan Estimation</h2>
<table id="tablemain">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<label for="principalAmount">Principal Loan Amount (Rs.)</label>
</td>
<td>
<input type="text" id="principalAmount" placeholder="Principal Amount" required>
</td>
</tr>
<tr>
<td>
<label for="interestRate">Interst Rate (%)</label>
</td>
<td>
<input type="text" id="interestRate" placeholder="Interest Per Annum" required>
</td>
</tr>
<tr>
<td>
<label for="tenure">Tenure (in months)</label>
</td>
<td>
<input type="text" id="tenure" placeholder="Tenure in Months" required>
</td>
</tr>
<tr>
<td></td>
<td align="left" style="padding: 10px">
<input id="Estimate" type="button" value="Estimate" onclick="EstimateReducingInterestLoan()">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<caption><b>Loan Estimation</b></caption>
<thead>
<tr>
<th>Details</th>
<th>Reducing Interest Loan</th>
<th>Fixed Interest Loan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Total Interest Rs.</td>
<td>
<output id="tInterest"></output>
</td>
<td>
<output id="tInterestFixed"></output>
</td>
</tr>
<tr>
<td>Total Payment Rs.</td>
<td>
<output id="tPayment"></output>
</td>
<td>
<output id="tPaymentFixed"></output>
</td>
</tr>
<tr>
<td>Monthly EMI Rs.</td>
<td>
<output id="EMI"></output>
</td>
<td>
<output id="EMIFixed"></output>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script src="Estimation.js"></script>
</body>
</html>
Estimation.js
const _principalAmount = document.getElementById("principalAmount");
const _interestRateYear = document.getElementById("interestRate");
const _tenureMonth = document.getElementById("tenure");
function getEmiReducing(P, N, R) {
return (P * R * (Math.pow((1 + R), N) / (Math.pow((1 + R), N) - 1)));
}
function EstimateReducingInterestLoan() {
calculateEMI();
totalPayment();
totalInterest();
EstimateFixedInterestLoan();
}
function EstimateFixedInterestLoan() {
const principalAmount = Number(_principalAmount.value);
const interestRateYear = Number(_interestRateYear.value);
const tenureMonth = Number(_tenureMonth.value);
const totalInterestFixed = principalAmount * interestRateYear * tenureMonth / 1200;
const totalPaymentFixed = principalAmount + totalInterestFixed;
const emiFixed = totalPaymentFixed / tenureMonth;
document.getElementById("tInterestFixed").innerHTML = Number(totalInterestFixed).toFixed(2).toString();
document.getElementById("tPaymentFixed").innerHTML = Number(totalPaymentFixed).toFixed(2).toString();
document.getElementById("EMIFixed").innerHTML = Number(emiFixed).toFixed(2).toString();
}
function reducingLoan() {
const principalAmount = Number(_principalAmount.value);
const interestRateYear = Number(_interestRateYear.value);
const interestRateMonth = Number(interestRateYear / 1200);
const tenureMonth = Number(_tenureMonth.value);
const emiReducing = getEmiReducing(principalAmount, tenureMonth, interestRateMonth);
const totalPaymentReducing = tenureMonth * emiReducing;
const totalInterestReducing = totalPaymentReducing - principalAmount;
return {
emiReducing: emiReducing,
totalPaymentReducing: totalPaymentReducing,
totalInterestReducing: totalInterestReducing
};
}
function calculateEMI() {
const emiReducing = reducingLoan().emiReducing;
document.getElementById("EMI").innerHTML = Number(emiReducing).toFixed(2).toString();
}
function totalPayment() {
const totalPaymentReducing = reducingLoan().totalPaymentReducing;
document.getElementById("tPayment").innerHTML = Number(totalPaymentReducing).toFixed(2).toString();
}
function totalInterest() {
const totalInterestReducing = reducingLoan().totalInterestReducing;
document.getElementById("tInterest").innerText = Number(totalInterestReducing).toFixed(2).toString();
}
