Learn to build an interactive EMI calculator in Laravel! This [2025] step-by-step guide provides full code using Bootstrap, JavaScript, Chart.js, and includes an amortization schedule.
Add a powerful EMI calculator to your Laravel website. Follow our detailed [2025] tutorial with code snippets for interactive UI, real-time calculations, charts, and payment schedules.
Core Features:
Step 1: Create the Controller
Run this command in your Laravel project's terminal:
php artisan make:controller EmiCalculatorControllerOpen app/Http/Controllers/EmiCalculatorController.php and add the following method:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class EmiCalculatorController extends Controller
{
/**
* Display the EMI calculator view.
*
* @return \Illuminate\View\View
*/
public function index()
{
return view('emi_calculator'); // We will create this view next
}
}Step 2: Define the Route
Open routes/web.php and add the following route:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\EmiCalculatorController; // Make sure to import the controller
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
// Add this line for the EMI Calculator
Route::get('/emi-calculator', [EmiCalculatorController::class, 'index'])->name('emi.calculator');
Step 3: Create the Blade View (emi_calculator.blade.php)
Create a new file at resources/views/emi_calculator.blade.php. Paste the following code into it. This includes HTML structure, Bootstrap classes, input fields, result displays, the chart canvas, and the amortization table structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EMI Calculator</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
body {
background-color: #f8f9fa;
}
.calculator-container {
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
margin-top: 40px;
}
.result-section {
background-color: #e9ecef;
padding: 20px;
border-radius: 8px;
margin-top: 20px;
}
.result-value {
font-size: 1.4rem;
font-weight: bold;
color: #0d6efd; /* Bootstrap primary blue */
}
.result-label {
font-size: 0.9rem;
color: #6c757d; /* Bootstrap secondary text */
margin-bottom: 15px;
}
#emiChart {
max-height: 300px; /* Adjust as needed */
margin: 20px auto;
}
.amortization-table {
margin-top: 30px;
max-height: 400px;
overflow-y: auto;
}
.form-label {
font-weight: 500;
}
/* Style sliders */
input[type=range] {
cursor: pointer;
}
.slider-value {
font-weight: bold;
}
/* Add some spacing */
.form-group {
margin-bottom: 1.5rem;
}
h2, h3 {
color: #343a40; /* Bootstrap dark grey */
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10 col-xl-8">
<div class="calculator-container">
<h2 class="text-center mb-4">Advanced EMI Calculator</h2>
<form id="emiForm">
<div class="row">
<div class="col-md-6 form-group">
<label for="loanAmount" class="form-label">Loan Amount (<span id="currencySymbol">₹</span>)</label>
<input type="number" class="form-control" id="loanAmount" placeholder="e.g., 500000" min="1000" step="1000" required value="500000">
<input type="range" class="form-range mt-2" id="loanAmountSlider" min="1000" max="10000000" step="1000" value="500000">
<div class="text-end"><small>Current Value: <span class="slider-value" id="loanAmountValue">₹500,000</span></small></div>
</div>
<div class="col-md-6 form-group">
<label for="interestRate" class="form-label">Annual Interest Rate (%)</label>
<input type="number" class="form-control" id="interestRate" placeholder="e.g., 10.5" min="0.1" step="0.01" required value="10.5">
<input type="range" class="form-range mt-2" id="interestRateSlider" min="0.1" max="25" step="0.01" value="10.5">
<div class="text-end"><small>Current Value: <span class="slider-value" id="interestRateValue">10.5%</span></small></div>
</div>
<div class="col-md-12 form-group">
<label for="loanTenure" class="form-label">Loan Tenure (Years)</label>
<input type="number" class="form-control" id="loanTenure" placeholder="e.g., 5" min="1" max="30" step="1" required value="5">
<input type="range" class="form-range mt-2" id="loanTenureSlider" min="1" max="30" step="1" value="5">
<div class="text-end"><small>Current Value: <span class="slider-value" id="loanTenureValue">5 Years</span></small></div>
</div>
</div>
</form>
<hr class="my-4">
<h3 class="text-center mb-3">Calculation Results</h3>
<div class="result-section">
<div class="row text-center">
<div class="col-md-4">
<div class="result-label">Monthly EMI</div>
<div class="result-value" id="emiResult">₹0.00</div>
</div>
<div class="col-md-4">
<div class="result-label">Total Interest Payable</div>
<div class="result-value" id="totalInterestResult">₹0.00</div>
</div>
<div class="col-md-4">
<div class="result-label">Total Amount Payable</div>
<div class="result-value" id="totalAmountResult">₹0.00</div>
</div>
</div>
</div>
<div class="mt-4 text-center">
<h3 class="mb-3">Payment Breakdown</h3>
<canvas id="emiChart"></canvas>
</div>
<div class="amortization-table mt-4">
<h3 class="text-center mb-3">Amortization Schedule</h3>
<table class="table table-striped table-bordered table-hover">
<thead class="table-dark sticky-top">
<tr>
<th>Month</th>
<th>Principal Paid</th>
<th>Interest Paid</th>
<th>Total Payment</th>
<th>Balance Remaining</th>
</tr>
</thead>
<tbody id="amortizationTableBody">
<tr><td colspan="5" class="text-center">Adjust inputs to see the schedule.</td></tr>
</tbody>
</table>
</div>
<p class="text-center text-muted mt-4"><small>Disclaimer: Calculations are estimates and for informational purposes only.</small></p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
<script>
// --- DOM Elements ---
const loanAmountInput = document.getElementById('loanAmount');
const interestRateInput = document.getElementById('interestRate');
const loanTenureInput = document.getElementById('loanTenure');
const loanAmountSlider = document.getElementById('loanAmountSlider');
const interestRateSlider = document.getElementById('interestRateSlider');
const loanTenureSlider = document.getElementById('loanTenureSlider');
const loanAmountValue = document.getElementById('loanAmountValue');
const interestRateValue = document.getElementById('interestRateValue');
const loanTenureValue = document.getElementById('loanTenureValue');
const emiResultDisplay = document.getElementById('emiResult');
const totalInterestResultDisplay = document.getElementById('totalInterestResult');
const totalAmountResultDisplay = document.getElementById('totalAmountResult');
const amortizationTableBody = document.getElementById('amortizationTableBody');
const chartCanvas = document.getElementById('emiChart');
const currencySymbol = document.getElementById('currencySymbol').textContent; // Or set manually e.g., '$'
let emiChart = null; // To hold the chart instance
// --- Formatters ---
const currencyFormatter = new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR', minimumFractionDigits: 2 }); // Adjust 'en-IN' and 'INR' as needed
// --- Update Slider Display Values ---
function updateSliderDisplays() {
loanAmountValue.textContent = currencyFormatter.format(parseFloat(loanAmountInput.value)).replace(/\.00$/, ''); // Remove trailing .00 for whole numbers
interestRateValue.textContent = `${parseFloat(interestRateInput.value).toFixed(2)}%`;
loanTenureValue.textContent = `${loanTenureInput.value} Year${loanTenureInput.value > 1 ? 's' : ''}`;
}
// --- Slider/Input Synchronization ---
loanAmountSlider.addEventListener('input', () => {
loanAmountInput.value = loanAmountSlider.value;
updateSliderDisplays();
calculateAndDisplayEMI();
});
interestRateSlider.addEventListener('input', () => {
interestRateInput.value = interestRateSlider.value;
updateSliderDisplays();
calculateAndDisplayEMI();
});
loanTenureSlider.addEventListener('input', () => {
loanTenureInput.value = loanTenureSlider.value;
updateSliderDisplays();
calculateAndDisplayEMI();
});
loanAmountInput.addEventListener('input', () => {
// Ensure slider stays within bounds if typed value is outside range
const val = Math.max(parseFloat(loanAmountSlider.min), Math.min(parseFloat(loanAmountSlider.max), parseFloat(loanAmountInput.value) || 0));
loanAmountSlider.value = val;
loanAmountInput.value = val; // Update input value if adjusted
updateSliderDisplays();
calculateAndDisplayEMI();
});
interestRateInput.addEventListener('input', () => {
const val = Math.max(parseFloat(interestRateSlider.min), Math.min(parseFloat(interestRateSlider.max), parseFloat(interestRateInput.value) || 0));
interestRateSlider.value = val;
interestRateInput.value = val;
updateSliderDisplays();
calculateAndDisplayEMI();
});
loanTenureInput.addEventListener('input', () => {
const val = Math.max(parseInt(loanTenureSlider.min), Math.min(parseInt(loanTenureSlider.max), parseInt(loanTenureInput.value) || 0));
loanTenureSlider.value = val;
loanTenureInput.value = val;
updateSliderDisplays();
calculateAndDisplayEMI();
});
// --- Core EMI Calculation Logic ---
function calculateAndDisplayEMI() {
const principal = parseFloat(loanAmountInput.value);
const annualRate = parseFloat(interestRateInput.value);
const tenureYears = parseInt(loanTenureInput.value);
// Basic validation
if (isNaN(principal) || principal <= 0 || isNaN(annualRate) || annualRate <= 0 || isNaN(tenureYears) || tenureYears <= 0) {
resetResults();
return;
}
const monthlyRate = annualRate / (12 * 100);
const numberOfMonths = tenureYears * 12;
let emi = 0;
let totalAmount = 0;
let totalInterest = 0;
if (monthlyRate > 0) {
const rateFactor = Math.pow(1 + monthlyRate, numberOfMonths);
emi = principal * monthlyRate * rateFactor / (rateFactor - 1);
totalAmount = emi * numberOfMonths;
totalInterest = totalAmount - principal;
} else {
// Handle zero interest rate
emi = principal / numberOfMonths;
totalAmount = principal;
totalInterest = 0;
}
if (!isFinite(emi)) { // Handle potential division by zero or invalid results
resetResults();
return;
}
// Display Results
emiResultDisplay.textContent = currencyFormatter.format(emi);
totalInterestResultDisplay.textContent = currencyFormatter.format(totalInterest);
totalAmountResultDisplay.textContent = currencyFormatter.format(totalAmount);
// Generate Schedule and Update Chart
generateAmortizationSchedule(principal, monthlyRate, numberOfMonths, emi);
updateChart(principal, totalInterest);
}
// --- Reset Results ---
function resetResults() {
emiResultDisplay.textContent = currencyFormatter.format(0);
totalInterestResultDisplay.textContent = currencyFormatter.format(0);
totalAmountResultDisplay.textContent = currencyFormatter.format(0);
amortizationTableBody.innerHTML = '<tr><td colspan="5" class="text-center">Invalid input. Please check values.</td></tr>';
if (emiChart) {
emiChart.data.datasets[0].data = [0, 0];
emiChart.update();
}
}
// --- Amortization Schedule Generation ---
function generateAmortizationSchedule(principal, monthlyRate, numberOfMonths, emi) {
amortizationTableBody.innerHTML = ''; // Clear previous schedule
let balance = principal;
let totalInterestPaid = 0; // For verification
if (!isFinite(emi) || emi <= 0) {
amortizationTableBody.innerHTML = '<tr><td colspan="5" class="text-center">Cannot generate schedule with current inputs.</td></tr>';
return;
}
for (let month = 1; month <= numberOfMonths; month++) {
const interestPaid = balance * monthlyRate;
let principalPaid = emi - interestPaid;
// Adjust the last payment's principal slightly to ensure balance becomes exactly zero
// This handles potential floating-point inaccuracies
if (month === numberOfMonths) {
principalPaid = balance; // The remaining balance *is* the principal paid in the last month
emi = principalPaid + interestPaid; // Adjust the final EMI slightly if needed
}
balance -= principalPaid;
totalInterestPaid += interestPaid; // Keep track for potential verification
// Ensure balance doesn't go negative due to floating point issues
if (balance < 0) {
principalPaid += balance; // Add back the small negative amount to principal
balance = 0;
}
const row = `<tr>
<td>${month}</td>
<td>${currencyFormatter.format(principalPaid)}</td>
<td>${currencyFormatter.format(interestPaid)}</td>
<td>${currencyFormatter.format(emi)}</td>
<td>${currencyFormatter.format(balance)}</td>
</tr>`;
amortizationTableBody.insertAdjacentHTML('beforeend', row);
}
// Optional: console.log("Total Interest Calculated:", totalInterestPaid); // Compare with totalInterestResultDisplay
}
// --- Chart Update Logic ---
function updateChart(principal, totalInterest) {
const chartData = {
labels: ['Principal Loan Amount', 'Total Interest'],
datasets: [{
data: [principal > 0 ? principal : 0, totalInterest > 0 ? totalInterest : 0], // Ensure non-negative values for chart
backgroundColor: [
'rgba(54, 162, 235, 0.7)', // Blue
'rgba(255, 99, 132, 0.7)' // Red
],
borderColor: [
'rgba(54, 162, 235, 1)',
'rgba(255, 99, 132, 1)'
],
borderWidth: 1
}]
};
if (emiChart) {
// Update existing chart
emiChart.data.labels = chartData.labels;
emiChart.data.datasets[0].data = chartData.datasets[0].data;
emiChart.update();
} else {
// Create new chart
const ctx = chartCanvas.getContext('2d');
emiChart = new Chart(ctx, {
type: 'pie', // Or 'doughnut'
data: chartData,
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
tooltip: {
callbacks: {
label: function(context) {
let label = context.label || '';
if (label) {
label += ': ';
}
if (context.parsed !== null) {
// Use the same formatter as results
label += currencyFormatter.format(context.parsed);
}
return label;
}
}
}
}
}
});
}
}
// --- Initial Setup ---
document.addEventListener('DOMContentLoaded', () => {
updateSliderDisplays(); // Set initial slider text values
calculateAndDisplayEMI(); // Calculate EMI based on default values on page load
});
</script>
</body>
</html>
Step 4: Integration and Explanation
EmiCalculatorController.php is in the app/Http/Controllers/ directory.emi_calculator.blade.php is in the resources/views/ directory.routes/web.php.php artisan servehttp://127.0.0.1:8000/emi-calculator (or whatever URL your server uses + /emi-calculator)./emi-calculator to the index method of EmiCalculatorController. This controller simply loads and returns the emi_calculator.blade.php view.number type for direct entry, range type for sliders) for loan amount, interest rate, and tenure.div elements with IDs like emiResult) to display the calculated results.<canvas> element for Chart.js to draw the pie chart.<table> structure for the amortization schedule.<style> block). Bootstrap handles most of the responsiveness and basic styling.input event listeners to all input fields and sliders. Whenever the value changes in any of them, the calculateAndDisplayEMI function is triggered.calculateAndDisplayEMI(): This is the core function. It reads the current values from the inputs, validates them, performs the EMI calculation using the standard formula EMI = P × r × (1 + r)ⁿ / ((1 + r)ⁿ - 1) (where r is the monthly interest rate and n is the number of months), calculates total interest and total amount, and updates the result display elements using textContent. It formats the currency using Intl.NumberFormat for better readability. It then calls generateAmortizationSchedule and updateChart.generateAmortizationSchedule(): Clears the previous table content. It then loops through each month of the loan tenure, calculates the interest and principal portion for that month's EMI payment, and determines the remaining balance. It creates a table row (<tr>) for each month and appends it to the table body (#amortizationTableBody). It includes logic to handle potential floating-point inaccuracies in the final payment.updateChart(): Uses the Chart.js library. It takes the principal and total interest as input. If a chart instance already exists, it updates its data; otherwise, it creates a new Pie chart on the <canvas> element. Tooltips are formatted to show currency.DOMContentLoaded), it calls updateSliderDisplays and calculateAndDisplayEMI once to show results based on the default values set in the HTML.'en-IN', 'INR', and the ₹ symbol in the JavaScript (currencyFormatter) and HTML (#currencySymbol) to match your target currency (e.g., 'en-US', 'USD', $).min, max, and step attributes on the <input type="range"> and corresponding <input type="number"> elements if needed.<head>) for further visual customization. If you're using Laravel Mix or Vite, compile your assets instead of using CDNs for better performance and management.value="..." attributes in the HTML input fields to set different default values when the page loads.This setup provides a fully functional, interactive, and visually appealing EMI calculator integrated directly into your Laravel application.
Okay, changing the currency in the EMI calculator involves modifications in two places within the resources/views/emi_calculator.blade.php file:
Intl.NumberFormat object which handles the formatting of calculated values. Here’s how to do it, step-by-step:
Step 1: Change the HTML Currency Symbol
resources/views/emi_calculator.blade.php file.Find the <span> element with the ID currencySymbol:
<label for="loanAmount" class="form-label">Loan Amount (<span id="currencySymbol">₹</span>)</label>
<span> tags from ₹ (Indian Rupee) to your desired currency symbol.For Bangladeshi Taka (BDT), change it to ৳:
<label for="loanAmount" class="form-label">Loan Amount (<span id="currencySymbol">৳</span>)</label>For US Dollar (USD), change it to $:
<label for="loanAmount" class="form-label">Loan Amount (<span id="currencySymbol">$</span>)</label>For Euro (EUR), change it to €:
<label for="loanAmount" class="form-label">Loan Amount (<span id="currencySymbol">€</span>)</label>For British Pound (GBP), change it to £:
<label for="loanAmount" class="form-label">Loan Amount (<span id="currencySymbol">£</span>)</label>Step 2: Update the JavaScript Currency Formatter
<script> section at the bottom of the emi_calculator.blade.php file.Find the line where the currencyFormatter constant is defined (around line 117):
const currencyFormatter = new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR', minimumFractionDigits: 2 }); // Adjust 'en-IN' and 'INR' as neededYou need to change two parts here:
'en-IN'): This determines the formatting conventions (like using commas or periods for separators). Replace 'en-IN' with the appropriate locale code for your target currency/region.'INR'): This must be the standard ISO 4217 currency code for your desired currency. Replace 'INR' with the correct code.Here are examples for different currencies:
For Bangladeshi Taka (BDT - ৳): Use 'bn-BD' (Bengali locale for Bangladesh) or 'en-BD' (English locale for Bangladesh) and 'BDT'.
// Using Bengali locale
const currencyFormatter = new Intl.NumberFormat('bn-BD', { style: 'currency', currency: 'BDT', minimumFractionDigits: 2 });
// Or using English locale (might format slightly differently)
// const currencyFormatter = new Intl.NumberFormat('en-BD', { style: 'currency', currency: 'BDT', minimumFractionDigits: 2 });For US Dollar (USD - $): Use 'en-US' locale and 'USD' currency code.
const currencyFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2 });For Euro (EUR - €): You can use various European locales like 'de-DE' (Germany), 'fr-FR' (France), 'es-ES' (Spain), etc., with the 'EUR' currency code. The locale affects whether commas or periods are used as decimal separators.
// Example using German locale (comma decimal separator)
const currencyFormatter = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2 });For British Pound (GBP - £): Use 'en-GB' locale and 'GBP' currency code.
const currencyFormatter = new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP', minimumFractionDigits: 2 });Step 3: Save and Test
emi_calculator.blade.php file after making both changes (HTML symbol and JavaScript formatter).http://yourdomain/emi-calculator or your specific URL).You should now see the new currency symbol next to the "Loan Amount" label, and all the calculated results (Monthly EMI, Total Interest, Total Amount, Amortization Schedule values) should be formatted according to the new currency and locale settings.
Learn how to implement a versatile pop-up box in Laravel, designed to showcase custom images and text content on your website's frontend. A dedicated admin panel empowers administrators to easily modify the pop-up's appearance, including colors, size, content, and visibility status. This provides a code-free way for non-developers to manage website announcements or promotions directly.
This code creates a user-friendly contact form with HTML. CSS styles the form for a clean, modern aesthetic. It includes fields for name, email, subject, and message. The form is designed for easy data collection and submission.
This implementation works with WordPress or any PHP-based CMS. For static sites, convert the PHP shortcode to direct HTML markup.
