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
calculateBtnbutton has an event listener, when the button is clicked, it triggers thecalculateEMIfunction, passing the loan amount, interest rate, and loan tenure as arguments. The calculated EMI is then displayed in theemiResultelement. -
The
calculateEMIthe 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>
</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:
Output
Recommended Articles