EMI Calculator Card using Tailwind CSS and JavaScript

Last Updated : 07 Mar, 2024

An EMI (Equated Monthly Installment) calculator helps users determine the monthly payment amount towards a loan including both the principal amount and the interest. This project will demonstrate how to create a simple yet effective financial tool using the Tailwind CSS framework.

Approach to create EMI Calculator Card

Firstly, integrate the Tailwind CSS via the CDN link.
Tailwind CSS classes are used extensively to style elements. Classes like bg-gray-100, p-8, bg-white, rounded-lg, shadow-lg, border, and others define the appearance of the calculator. For styling Inputs and buttons use Tailwind utility classes to control their appearance, padding, borders, and background colors.
The calculateBtn button has an event listener, when the button is clicked, it triggers the calculateEMI function, passing the loan amount, interest rate, and loan tenure as arguments. The calculated EMI is then displayed in the emiResult element.
The calculateEMI the function calculates the EMI. It takes three parameters: loan amount, interest rate, and loan tenure.
Inside the function, the monthly interest rate is calculated by dividing the annual interest rate by 12 (months) and converting it to a percentage.
Users can input the loan amount, interest rate, and loan tenure. Upon clicking the “Calculate EMI” button, the EMI is calculated and displayed below the button.

Example: Implementation of Building an EMI Calculator in Tailwind CSS and JavaScript

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>The EMI Calculator</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
 
<body class="bg-gray-100 flex items-center 
             justify-center h-screen">
    <div class="max-w-md mx-auto p-8 bg-white rounded-lg
                shadow-lg border border-green-500">
        <h1 class="text-3xl font-bold mb-4 text-center">
            EMI Calculator
        </h1>
        <div class="mb-6">
            <label for="Amount" class="block text-sm 
                                       font-medium text-gray-700
                                       mb-2">
                Loan Amount (INR)
            </label>
            <input type="number" id="Amount"
                   placeholder="Enter Loan Amount"
                   class="bg-gray-200 text-gray-700 border 
                          border-green-500 rounded py-3 px-4 mb-3
                          leading-tight focus:outline-none 
                          focus:bg-white focus:border-gray-500">
        </div>
        <div class="mb-6">
            <label for="interestRate"
                   class="block text-sm font-medium 
                          text-gray-700 mb-2">
                Interest Rate (%)
            </label>
            <input type="number" id="interestRate"
                   placeholder="Enter Interest Rate"
                   class="bg-gray-200 text-gray-700 border
                          border-green-500 rounded py-3 px-4 
                          mb-3 leading-tight focus:outline-none
                          focus:bg-white focus:border-gray-500">
        </div>
        <div class="mb-6">
            <label for="loanTenure"
                   class="block text-sm font-medium 
                          text-gray-700 mb-2">
                Loan Tenure (Months)
            </label>
            <input type="number" id="loanTenure"
                   placeholder="Enter Loan Tenure"
                   class="bg-gray-200 text-gray-700 border 
                          border-green-500 rounded py-3 px-4
                          mb-3 leading-tight focus:outline-none
                          focus:bg-white focus:border-gray-500">
        </div>
        <button id="calculateBtn"
                class="bg-blue-500 hover:bg-blue-700 text-white
                       font-bold py-2 px-4 rounded focus:outline-none
                       focus:shadow-outline w-full">
          Calculate EMI
        </button>
        <div id="emiResult" class="text-center text-lg
                                   font-semibold mt-4">
          </div>
    </div>
    <script>
        document.getElementById('calculateBtn')
            .addEventListener('click', function () {
                const Amount = document.getElementById('Amount')
                                       .value;
                const interestRate = document.getElementById('interestRate')
                                             .value;
                const loanTenure = document.getElementById('loanTenure')
                                           .value;
                const emi = calculateEMI(Amount, interestRate, loanTenure);
                document.getElementById('emiResult')
                          .innerText = `EMI: ₹${emi.toFixed(2)}`;
            });
        function calculateEMI(Amount, interestRate, loanTenure) {
            const monthlyInterestRate = (interestRate / 12) / 100;
            const emi = Amount * monthlyInterestRate *
                          Math.pow(1 + monthlyInterestRate, loanTenure) /
                        (Math.pow(1 + monthlyInterestRate, loanTenure) - 1);
            return emi;
        }
    </script>
</body>
 
</html>