Check out this comprehensive tutorial on building an EMI (Equated Monthly Installment) calculator using HTML! Learn how to create input fields for loan amount, interest rate, and tenure, along with labels and buttons for a user-friendly interface. With step-by-step guidance and CSS styling tips, you'll be able to integrate this handy tool into your website or web application effortlessly. Watch now to empower your users with the ability to estimate loan repayments conveniently!
HTML
WebDevelopment
EMICalculatorTutorial
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EMI Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 15px;
}
button {
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h2>EMI Calculator</h2>
<label for="principal">Loan Amount:</label>
<input type="number" id="principal" placeholder="Enter loan amount" required>
<label for="interest">Annual Interest Rate (%):</label>
<input type="number" id="interest" placeholder="Enter annual interest rate" required>
<label for="tenure">Loan Tenure (months):</label>
<input type="number" id="tenure" placeholder="Enter loan tenure in months" required>
<button onclick="calculateEMI()">Calculate EMI</button>
<h3>Monthly Payment Details:</h3>
<table>
<thead>
<tr>
<th>Month</th>
<th>Principal</th>
<th>Interest</th>
<th>Total Payment</th>
</tr>
</thead>
<tbody id="emiTableBody">
</tbody>
</table>
<script>
function calculateEMI() {
const principal = parseFloat(document.getElementById("principal").value);
const interestRate = parseFloat(document.getElementById("interest").value) / 100 / 12;
const tenureMonths = parseFloat(document.getElementById("tenure").value);
const monthlyInterest = (principal * interestRate);
const monthlyPayment = (principal * interestRate) / (1 - Math.pow(1 + interestRate, -tenureMonths));
let remainingPrincipal = principal;
let emiTableBody = "";
for (let i = 1; i <= tenureMonths; i++) {
const interestPayment = remainingPrincipal * interestRate;
const principalPayment = monthlyPayment - interestPayment;
remainingPrincipal -= principalPayment;
emiTableBody += `<tr>
<td>${i}</td>
<td>${principalPayment.toFixed(2)}</td>
<td>${interestPayment.toFixed(2)}</td>
<td>${monthlyPayment.toFixed(2)}</td>
</tr>`;
}
document.getElementById("emiTableBody").innerHTML = emiTableBody;
}
</script>
</body>
</html>
Preview of the EMI CALCULATOR
EMI Calculator
Monthly Payment Details:
| Month | Principal | Interest | Total Payment |
|---|
