Creating a Loan EMI (Equated Monthly Installment) Calculator using HTML, CSS, and JavaScript is a great way to understand how loan repayments work. Below, I’ll guide you through the steps to create a professional-looking EMI calculator. The calculator will take the loan amount, interest rate, and loan tenure as inputs and display the monthly EMI, total interest payable, and the total amount payable.
Please Click Here To Download Android APP:android app-release
Step 1: HTML Structure
First, let’s create the basic structure of our EMI calculator using HTML.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Loan EMI Calculator</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”calculator-container”>
<h1>Loan EMI Calculator</h1>
<form id=”emiForm”>
<div class=”input-group”>
<label for=”loanAmount”>Loan Amount (₹)</label>
<input type=”number” id=”loanAmount” required>
</div>
<div class=”input-group”>
<label for=”interestRate”>Interest Rate (% per annum)</label>
<input type=”number” id=”interestRate” required>
</div>
<div class=”input-group”>
<label for=”loanTenure”>Loan Tenure (in years)</label>
<input type=”number” id=”loanTenure” required>
</div>
<button type=”submit”>Calculate EMI</button>
</form>
<div id=”result” class=”result-container”>
<h2>Result</h2>
<p>Monthly EMI: <span id=”monthlyEMI”></span></p>
<p>Total Interest Payable: <span id=”totalInterest”></span></p>
<p>Total Amount Payable: <span id=”totalAmount”></span></p>
<p>Total Months: <span id=”totalMonths”></span></p>
</div>
</div>
<script src=”script.js”></script>
</body>
</html>
Step 2: CSS Styling
Next, let’s style our calculator to make it look professional and user-friendly.
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.calculator-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h1 {
text-align: center;
color: #333;
}
.input-group {
margin-bottom: 15px;
}
.input-group label {
display: block;
margin-bottom: 5px;
color: #555;
}
.input-group input {
width: 100%;
padding: 8px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
.result-container {
margin-top: 20px;
padding: 10px;
background-color: #f8f9fa;
border-radius: 4px;
}
.result-container h2 {
margin-top: 0;
color: #333;
}
.result-container p {
margin: 5px 0;
color: #555;
}
Step 3: JavaScript Logic
Finally, let’s add the JavaScript to calculate the EMI, total interest, total amount, and total months.
