Loan EMI Calculator | HTML, CSS & JavaScript

Loan EMI Calculator with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #19

Project Overview

The Loan EMI Calculator is a beginner-friendly project built using HTML, CSS, and JavaScript. It allows users to calculate their monthly EMI by entering the loan amount, annual interest rate, and loan tenure. This project uses JavaScript formula to calculate the monthly installment based on the entered values. It also validates the input fields and displays an error message if any required information is missing. Once valid values are entered, the calculated monthly EMI is displayed instantly without refreshing the webpage.

This project helps beginners understand how JavaScript can perform mathematical calculations using user input. It introduces concepts such as functions, input validation, type conversion, mathematical formulas, Math.pow() and DOM manipulation.

Key Features

Monthly EMI Calculation: Users can enter loan details and calculate their monthly EMI using a JavaScript financial formula.
Loan Amount Input: The application accepts the total loan amount entered by the user as the principal amount.
Interest Rate Input: Users can enter the annual interest rate, which JavaScript converts into a monthly interest rate.
Loan Tenure Input: The loan tenure is entered in years and converted into months before the EMI calculation.
Input Validation: JavaScript checks whether all required fields contain values before performing the calculation.
Instant Result Display: The calculated monthly EMI is displayed immediately on the webpage without requiring a page refresh.
Decimal Formatting: The .toFixed(2) method formats the EMI amount to two decimal places for a cleaner result.
Error Messages: If any input field is empty, the application displays a message asking the user to fill all fields.
Simple Interface: The calculator uses a clean layout containing input fields, a calculation button, and a result area.
Easy to Extend: Developers can add features such as total interest calculation, total payment amount, currency selection, or an EMI breakdown.

What You'll Learn

Understand how to read values from HTML input fields.
Learn how JavaScript validates user input.
Practice converting strings into numbers using parseFloat().
Understand how to calculate monthly interest rates.
Learn how to convert years into months.
Practice using mathematical formulas in JavaScript.
Understand how Math.pow() calculates exponent values.
Learn how functions organize application logic.
Practice updating HTML using innerText.
Learn how to display error and success messages.
Understand how JavaScript performs calculations dynamically.

HTML Code

HTML creates the structure of the Loan EMI Calculator. First, the style.css file is linked inside the <head> section so CSS can control the appearance and layout of the application. This project conatins a main content which is placed inside the .emi-container and contains the project heading, input fields, Calculate EMI button, and result area.

The loanAmount input allows users to enter the loan amount, while interestRate is used to enter the annual interest rate and the loanTenure input accepts the loan duration in years, Calculate EMI button uses onclick="calculateEMI()" to run the JavaScript calculation function when clicked.

Finally, the result element provides space for displaying validation messages or the calculated monthly EMI, and the script.js file is loaded at the bottom of the <body> so JavaScript can access the required HTML elements.

<!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

CSS controls the appearance and layout of the Loan EMI Calculator. The universal * selector applies box-sizing: border-box and the Segoe UI font to all elements. The body uses Flexbox with justify-content and align-items to center the calculator on the page.

This .emi-container creates the main white card by adding a fixed width, padding, rounded corners, and a box shadow also, the heading is centered, while the label elements use a smaller font size for the input descriptions.

The input fields use full width, padding, margins, borders, and rounded corners to create a clean form layout. The button also uses full width, padding, a background color, white text, and cursor: pointer. Finally, the .result class adds spacing, font weight, and centered text so the calculated EMI or validation message is clearly displayed.

* {
  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

JavaScript handles the main EMI calculation. The calculateEMI() function first gets the values from the loanAmount, interestRate, and loanTenure input fields and selects the result element and the code checks whether any of the input fields are empty. If a value is missing, JavaScript changes the result text color to red, displays a validation message, and stops the function using return.

Next, parseFloat() converts the input values into numbers. The annual interest rate is converted into a monthly rate by dividing it by 12 and 100, while the loan tenure is converted from years into months.

Then the EMI is then calculated using the standard formula and Math.pow() is used to calculate the exponent values. Finally, the result color changes to green and .toFixed(2) formats the calculated monthly EMI to two decimal places before displaying it on the webpage.

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)}`;
}