In this tutorial, we will learn how to build an EMI (Equated Monthly Installment) calculator using HTML, JavaScript, and Alpine.js. An EMI calculator helps users estimate the monthly installment amount and the total repayment amount for a loan based on the principal amount, rate of interest, and tenure.
Here's what the final calculator will look like:
Prerequisites
To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript.
Step 1: Set up the HTML Structure
Let's start by setting up the basic HTML structure of the EMI calculator. Create a new HTML file and copy the following code into it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/alpinejs@2"></script>
<title>Loan Calculator</title>
<style>
/* CSS styles go here */
</style>
</head>
<body x-data="app()">
<div id="app" class="container">
<table class="table">
<!-- Table content goes here -->
</table>
</div>
<script>
const app = () => ({
// JavaScript logic goes here
});
</script>
</body>
</html>
This code sets up the basic HTML structure, includes the Alpine.js library, and defines a container element with the ID app.
Step 2: Style the Calculator
Let's add some CSS styles to make the calculator visually appealing. Copy the following CSS styles into the <style> tag in the HTML code:
<style>
body {
font-family: Arial, sans-serif;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-width: 600px;
border: 1px solid #ddd;
border-radius: 10px;
margin: auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.table {
width: 100%;
border-collapse: collapse;
}
.table th,
.table td {
padding: 10px;
border-bottom: 1px solid #ddd;
}
.table th {
text-align: right;
}
.table input[type="text"] {
width: 90%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
.reset-container {
display: flex;
justify-content: center;
}
.text-center {
text-align: center;
}
</style>
These styles define the appearance of the calculator, including the container, table, input fields, and reset button.
Step 3: Add Table Rows for Input Fields
Inside the <table> tag, let's add the table rows for the input fields. Replace the <!-- Table content goes here --> comment with the following code:
<thead>
<tr>
<td colspan="
2">
<h1 class="text-center">Loan Calculator</h1>
</td>
</tr>
</thead>
<tbody>
<!-- Principal -->
<tr>
<th scope="row">Principal</th>
<td>
<input type="text" x-model="input_data.Principal" />
</td>
</tr>
<!-- Rate of Interest -->
<tr>
<th scope="row">Rate of Interest (in %)</th>
<td>
<input type="text" x-model="input_data.RateOfInterest" />
</td>
</tr>
<!-- Tenure -->
<tr>
<th scope="row">Tenure (in months)</th>
<td>
<input type="text" x-model="input_data.Tenure" />
</td>
</tr>
<!-- EMI -->
<tr>
<th scope="row">EMI</th>
<td>
<span x-text="calculateEMI()"></span>
</td>
</tr>
<!-- Total Repayment -->
<tr>
<th scope="row">Total Repayment</th>
<td>
<span x-text="TPAY()"></span>
</td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="2">
<div class="reset-container">
<button class="reset-button" x-on:click="resetInputs">Reset</button>
</div>
</td>
</tr>
</thead>
This code adds table rows for the principal, rate of interest, tenure, EMI, and total repayment fields. It also includes a row for the reset button at the end.
Step 4: Add JavaScript Logic
Let's add the JavaScript logic to the <script> tag in the HTML code. Replace the // JavaScript logic goes here comment with the following code:
<script>
const app = () => ({
input_data: {
Principal: 100000,
RateOfInterest: 12,
Tenure: 6,
EMI: 0.0,
},
TPAY: function () {
return this.input_data.EMI * this.input_data.Tenure || 0;
},
calculateEMI: function () {
const principal = parseFloat(this.input_data.Principal);
const rateOfInterest = parseFloat(this.input_data.RateOfInterest);
const tenure = parseInt(this.input_data.Tenure);
if (!isNaN(principal) && !isNaN(rateOfInterest) && !isNaN(tenure)) {
const monthlyInterest = rateOfInterest / 12 / 100;
const emi =
(principal *
monthlyInterest *
Math.pow(1 + monthlyInterest, tenure)) /
(Math.pow(1 + monthlyInterest, tenure) - 1);
this.input_data.EMI = emi.toFixed(2);
} else {
this.input_data.EMI = -1;
}
return this.input_data.EMI;
},
resetInputs: function () {
this.input_data.Principal = 100000;
this.input_data.Tenure = 6;
this.input_data.RateOfInterest = 12;
this.calculateEMI();
},
});
</script>
This JavaScript code defines an Alpine.js component called app with the following properties and methods:
-
input_data: An object that holds the input values for principal, rate of interest, tenure, and EMI. -
TPAY(): A method that calculates and returns the total repayment amount based on the EMI and tenure. -
calculateEMI(): A method that calculates the EMI based on the input values and updates theinput_data.EMIproperty. -
resetInputs(): A method that resets the input values to their default values and recalculates the EMI.
Step 5: Test the EMI Calculator
Save the HTML file and open it in a web browser. You should see the EMI calculator with the input fields for principal, rate of interest, tenure, and the output fields for EMI and total repayment.
Try entering different values in the input fields and observe how the EMI and total repayment amount change dynamically.
Clicking the "Reset" button will reset the input values to their default values and recalculate the EMI.
You have successfully built an EMI calculator using HTML, JavaScript, and Alpine.js. You can further customize the calculator's appearance and behavior by modifying the HTML and CSS code.
Further you can develop function to calculate the Principal, given EMI, Rate and Tenure and other function given any 3 inputs calculate the other value.
Top comments (0)