Loan EMI Calculator | HTML, CSS & JavaScript

Loan EMI Calculator with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #19

Project Overview

A Loan EMI Calculator built using HTML, CSS, and JavaScript that helps users calculate their monthly loan installments based on loan amount, interest rate, and tenure.
The tool performs accurate financial calculations and displays results instantly, making it useful for understanding loan repayment planning.

Key Features

Calculates monthly EMI based on user inputs.
Accepts loan amount, annual interest rate, and loan tenure.
Instant result display without page reload.
Input validation to prevent empty or invalid values.
Clean, responsive, and easy-to-use interface.
Suitable for financial planning and learning EMI calculations.

HTML Code

<!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="style.css" />
</head>
<body>

  <div class="emi-container">
    <h2>Loan EMI Calculator</h2>

    <label>Loan Amount (₹)</label>
    <input type="number" id="loanAmount" placeholder="Enter loan amount" />

    <label>Interest Rate (% per year)</label>
    <input type="number" id="interestRate" placeholder="Enter interest rate" />

    <label>Loan Tenure (Years)</label>
    <input type="number" id="loanTenure" placeholder="Enter tenure in years" />

    <button onclick="calculateEMI()">Calculate EMI</button>

    <div class="result" id="result"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

* {
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  background: #042453;
  display: flex;
  justify-content: center;
  align-items: center;
}

.emi-container {
  background: #ffffff;
  width: 340px;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

h2 {
  text-align: center;
  margin-bottom: 15px;
}

label {
  font-size: 14px;
}

input {
  width: 100%;
  padding: 10px;
  margin: 8px 0 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: #4f46e5;
  color: white;
  cursor: pointer;
}

.result {
  margin-top: 15px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

Javascript Code

function calculateEMI() {
  const amount = document.getElementById("loanAmount").value;
  const rate = document.getElementById("interestRate").value;
  const tenure = document.getElementById("loanTenure").value;
  const result = document.getElementById("result");

  if (!amount || !rate || !tenure) {
    result.style.color = "red";
    result.innerText = "Please fill all fields";
    return;
  }

  const principal = parseFloat(amount);
  const monthlyRate = parseFloat(rate) / 12 / 100;
  const months = parseFloat(tenure) * 12;

  const emi =
    (principal * monthlyRate * Math.pow(1 + monthlyRate, months)) /
    (Math.pow(1 + monthlyRate, months) - 1);

  result.style.color = "green";
  result.innerText = `Your Monthly EMI is ₹${emi.toFixed(2)}`;
}