EMI Calculator Card using Tailwind CSS and JavaScript
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 thecalculateEMI
function, passing the loan amount, interest rate, and loan tenure as arguments. The calculated EMI is then displayed in theemiResult
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 > |
Output:
Contact Us