Fixed And Reducing Interest Loan Estimator

Fixed And Reducing Interest Loan Estimator Cognizant Handson

Bymadwithcode

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

ReducedInterestEstimation.html

<html>
<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">Interest 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();
}

Similar Posts