Design Loan EMI Calculator Using HTML, CSS, and JavaScript

To design a Loan EMI Calculator, we will be using HTML to create basic structure of EMI loan calcualtor, CSS to design the UI and JavaScript to add functionality of calculating the EMI based on user input of amount, rate per annum and time in months.

In this article, we will be understanding the stepwise process and code of how to design a loan EMI calculator using HTML, CSS and JavaScript.

• Structuring Loan EMI Calculator using HTML
• Designing UI of Loan EMI Calculator using CSS
• Adding Functionalities using JavaScript

Structuring Loan EMI Calculator using HTML

We will be following below mentioned steps to create strucure of loan EMI calcualtor using HTML.

• We have used three input boxes for taking user's input of amount, Intrest and time.
• We have used a button type input which creates a button to calculate the EMI and displays the result using span tag.
• We have wrapped all these element inside a parent div with class name container.

<div class="container">
    <h1>Loan Calculator </h1>
    <p>Loan amount: $
        <input type="number" id="amount" 
               placeholder="Enter amount">
    </p>
    <p>Rate (Interest): %
        <input step=".1" id="rate" 
               placeholder="Enter rate">
    </p>
    <p>Months (Time):
        <input type="number" id="time" 
               placeholder="Enter time">
    </p>
    <input type="button" value="Calculate" 
           id="btn" onclick="calculate()">
    <p>Total EMI: $
        <span id="output"></span>
    </p>
</div>

Designing UI of Loan EMI Calculator using CSS

We will be following below mentioned steps to design the UI of loan EMI calcualtor using CSS.

• We have used container class to design the overall layout of EMI calculator.
• The container class sets the dimension of EMI calculator using CSS height and width property, makes the container flexbox using "display: flex;", arranges the items vertically with flex-direction and centers the child element both horizontally and vertically using CSS justify-content and align-items property respectively.
• Then we have set the background-color and text color along with padding and margin which centers the container horizontally.
• We have used p as element type selector to design the labels for input by setting their color, font-size, font-family and bottom margin.
• Then we have designed all the input fields using input as element type selector by setting their dimension, font-size, padding and top margin.
• We have used #btn to design the calculate button by setting it's max-width property, color, cursor changes to pointer and center itself using align-self property.
• we have used ::placeholder psuedo element to change the color of placeholders.

.container {
    width: 400px;
    height: 550px;
    background-color: #031926;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;    
    padding: 30px;  
    border-radius: 10px;
    color: white;
    margin: 100px auto; 
}
p {
    color: white;
    font-size: 25px;
    font-family: Verdana, sans-serif;
    width: 100%;
    margin-bottom: 15px; 
}
h1 {
    color: white;
    align-self: center; 
    margin-bottom: 20px; 
}
input {
    height: 33px;
    width: 100%;
    background-color: white;
    font-size: 20px;
    color: #031926;
    padding: 7px;
    margin-top: 5px; 
}
#btn {
    color: #031926;
    max-width: fit-content;
    padding: 5px;
    cursor: pointer;
    margin-top: 20px; 
    align-self: center; 
}
span {
    font-weight: 20px; 
    color: white;
}
::placeholder {
    color: #031926;
}

Adding Functionalities using JavaScript

We will be following below mentioned steps to add calculation function to EMI loan calcualtor using Javascript.

• We have created a function calculate which is triggered upon clicking upon Calculate button.
• We have initialized three variables to store the user input value of amount, rate and time. It uses getElementById method to select the respective input fields and value property to get the current value entered by user.
• We have calculated the monthly rate of intrest using formula, monthlyRate: R/12/100, where R is anual rate entered by user.
• In the next step, we have calculated emi using formula, emi: (p*R*(1+R)^n)/((1+R)^n-1), where R is monthlyRate, p is amount and n is time in months.
• Then we have used toFixed() method to display the result upto two decimal points and stored it in result which is displayed in span tag with id output using innerHTML property.

function calculate() {
    let amount = document.getElementById('amount').value;
    let rate = document.getElementById('rate').value;
    let time = document.getElementById('time').value;
    let monthlyRate = rate / 12 / 100;
    let emi = (amount * monthlyRate * 
               Math.pow(1 + monthlyRate, time)) /
              (Math.pow(1 + monthlyRate, time) - 1);
    let result = emi.toFixed(2);
    document.getElementById("output").innerHTML = result;
}

Complete Example Code

Here is the complete example code implementing above mentioned steps to design a loan EMI Calculator using HTML, CSS and JavaScript.

<!DOCTYPE html>
<html>
<head>
    <title>Loan EMI Calculator</title>
    <style>
        .container {
            width: 400px;
            height: 550px;
            background-color: #031926;
            display: flex;
            flex-direction: column;
            justify-content: flex-start; 
            align-items: flex-start;    
            padding: 30px;  
            border-radius: 10px;
            color: white;
            margin: 100px auto; 
        }
        p {
            color: white;
            font-size: 25px;
            font-family: Verdana, sans-serif;
            width: 100%;
            margin-bottom: 15px; 
        }
        h1 {
            color: white;
            align-self: center; 
            margin-bottom: 20px; 
        }
        input {
            height: 33px;
            width: 100%;
            background-color: white;
            font-size: 20px;
            color: #031926;
            padding: 7px;
            margin-top: 5px; 
        }
        #btn {
            color: #031926;
            max-width: fit-content;
            padding: 5px;
            cursor: pointer;
            margin-top: 20px; 
            align-self: center; 
        }
        span {
            font-weight: 20px; 
            color: white;
        }
        ::placeholder {
            color: #031926;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Loan EMI Calculator </h1>
        <p>Loan amount: $
            <input type="number" id="amount" 
                   placeholder="Enter amount">
        </p>
        <p>Rate (Interest): %
            <input step=".1" id="rate" 
                   placeholder="Enter rate">
        </p>
        <p>Months (Time):
            <input type="number" id="time" 
                   placeholder="Enter time">
        </p>
        <input type="button" value="Calculate" 
               id="btn" onclick="calculate()">
        <p>Total EMI: $
            <span id="output"></span>
        </p>
    </div>
    <script>
        function calculate() {
            let amount = document.getElementById('amount').value;
            let rate = document.getElementById('rate').value;
            let time = document.getElementById('time').value;
            let monthlyRate = rate / 12 / 100;
            let emi = (amount * monthlyRate * 
                       Math.pow(1 + monthlyRate, time)) /
                      (Math.pow(1 + monthlyRate, time) - 1);
            let result = emi.toFixed(2);
            document.getElementById("output").innerHTML = result;
        }
    </script>
</body>
</html>

Conclusion

In this article, we understood how to design a loan EMI calculator using HTML, CSS and JavaScript. We created and designed the UI of EMI calculator using HTML and CSS and used JavaScript to retrieve the user input data to calculate the EMI and return the output.