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 |
|---|
0 Comments
"Thank you for taking the time to engage with this post! We value thoughtful and constructive comments that contribute to the discussion. Please keep your comments respectful and on-topic. We encourage you to share your insights, ask questions, and participate in meaningful conversations. Note that comments are moderated, and any inappropriate or spammy content will be removed. We look forward to hearing your thoughts!"