Fixed And Reducing Interest Loan Estimator/ javaScript

 

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.

Req. #	Req. Name	Req. Description
1	Design a Web page “Fixed And Reducing Loan Estimator” with the specified fields.	Label Name Component  Id (Specify it for the “id” attribute) Description Principal Loan Amount (Rs.) principalAmount To enter the principal amount for the loan. Design Constraints: The text “Principal Amount” should appear by default.  It should be mandatory. Interest Rate (%) interestRate To enter the interest rate percentage. Design Constraints: The text “Interest Per Annum” should appear by default. It should be mandatory. Tenure (in months) tenure To enter the tenure in months. Design Constraints: The text “Tenure in Months” should appear by default. It should be mandatory. Estimate Estimate The input type button must be used.  NOTE: The text highlighted in bold in the Description needs to be implemented in the code to complete the web page design.
3	Use JavaScript for displaying the calculated EMI, Total Payment and Total Interest for both the Fixed And Reducing Loan Interest	Use JavaScript for displaying the calculated EMI, Total Payment and Total Interest for both the Fixed And Reducing Loan Interest When the customer enters the valid values and clicks the “Estimate” button, the Reducing Interest Loan is displayed as  follows: The result should be displayed as “totalInterest” in a output tag with  id  “tInterest”.   “totalPayment” in a output tag with  id  “tPayment”.    “EMI” in a output tag with  id  “EMI”.   The Fixed Interest Loan is displayed as   follows:  “totalInterest” in a output tag with  id  “tInterestFixed”.   “totalPayment” in a output tag with  id  “tPaymentFixed”.    “EMI” in a output tag with  id  “EMIFixed”.   Note: Use the getElementsByName() or getElementById()  function to retrieve the values.
4	form  Tag  with attribute onsubmit	form Tag is already given in the code template. Do not change the code template and do the coding as per the requirements and specification. Make sure that the onclick attribute in the buttoncomponent with id=”Estimate” is invoking the JavaScript function like “EstimateReducingInterestLoan ()". For the Reducing Interest Loan: The EMI is calculated using the following formulae: EMI = P * R * ( (1 + R)^N / ((1 + R)^N - 1) ) where P -> Principal amount       R -> rate of interest per month = (r/100) / 12       r -> rate of Interest per annum       N -> tenure in months. Use toFixed() function to display only two numbers after the decimal point in the calculated EMI. For Example, the EMI is calculated as follows:   P = Rs. 1,00,000   r = 10%  R = (10/100) / 12   N = 24 months              EMI is Rs.4614.49 The Total Payment is calculated using the following formulae: totalPayment = EMI * tenure_months The Total Interest is using the following formulae: totalInterest = totalPayment – principalAmount For the Fixed Interest Loan: The Total Interest is using the following formulae: totalInterest =  principalAmount * interestRate/100 * tenure_years The Total Payment is calculated using the following formulae: totalPayment = principalAmount + totalInterest The EMI is calculated using the following formulae: EMI = totalPayment / (tenure_years * 12) Use toFixed() function to display only two numbers after the decimal point in the totalInterest, totalPayment and the calculated EMI.

Answer

ReducedIntrestEstimation.html:

<!DOCTYPE html>

<html>

  <head>

     <title>Fixed And Reducing Loan Estimator</title>

     

     <script type="text/javascript" src="Estimation.js"></script>

 

    <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;

       

        }

        

        #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>Principal Loan Amount (Rs.)</td>

<td><!--  Fill with appropriate code here -->

<input type = "text" name = "Principal Amount" id ="principalAmount" placeholder="Principal Amount" required></td>

</tr>

<tr>

<td>Interest Rate (%)</td>

    <td><!--  Fill with appropriate code here -->

    <input type = "text" name = "Interest Per Annum" id ="interestRate" placeholder="Interest per Annum" required></td>

</tr>

<tr>

<td>Tenure (in months)</td>

    <td><!--  Fill with appropriate code here -->

    <input type="text" name="Tenure in Months" 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>

<tbody>

    <thead>

        <tr>

            <th>Details</th>

            <th>Reducing Interest Loan</th>

            <th>Fixed Interest Loan</th>

                

            </tr>

        </thead>

<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>

</body>

</html>

Estimation.js

var P,r,R,N;

var reducedEMI,reducedTotalPayment,reducedTotalInterest,fixedTotalInterest,fixedTotalPayment,fixedEMI;

function EstimateReducingInterestLoan()

{

/* Fill with required javascript code to read input values from HTML Components  */

    P = parseInt(document.getElementById("principalAmount").value);

    r = parseInt(document.getElementById("interestRate").value);

    R = r / 1200;

    N = parseInt(document.getElementById("tenure").value);

calculateEMI();

    totalPayment();

    totalInterest();

    EstimateFixedInterestLoan();

    

}

function EstimateFixedInterestLoan()

{

    /* Fill with required javascript code here  */

    fixedTotalInterest = parseFloat((P * r * N)/1200);

    document.getElementById("tInterestFixed").innerHTML = fixedTotalInterest.toFixed(2); //Assign total Interest value here/

    

     /* Fill with required javascript code here  */

    fixedTotalPayment = parseFloat(P) + parseFloat(fixedTotalInterest);

    document.getElementById("tPaymentFixed").innerHTML = fixedTotalPayment.toFixed(2); //Assign total payment value here/

    //alert("tpf:"+fixedTotalPayment+" ti:"+fixedTotalInterest+" emi:"+fixedEMI);

     /* Fill with required javascript code here  */

    fixedEMI = parseFloat(fixedTotalPayment) / N;

    document.getElementById("EMIFixed").innerHTML = fixedEMI.toFixed(2); //Assign emi  value here/

    

    

}

function calculateEMI(){

    /* Fill with required javascript code here  */

    reducedEMI = P * R * (Math.pow((1 + R),N) / (Math.pow((1 + R),N) - 1));

    

    document.getElementById("EMI").innerHTML = reducedEMI.toFixed(2); //Assign emi value here/

}

function totalPayment(){

/* Fill with required javascript code here  */

reducedTotalPayment = reducedEMI * N;

    document.getElementById("tPayment").innerHTML = reducedTotalPayment.toFixed(2); //Assign total payment value here/

}

function totalInterest(){

/* Fill with required javascript code here  */

    reducedTotalInterest = reducedTotalPayment - P;

    

    document.getElementById("tInterest").innerHTML = reducedTotalInterest.toFixed(2); //Assign total Interest value here/

}