CODE FOR EMI CALCULATOR IN INDIA

Posted on by admin

Dynamic Input: Users can adjust loan amount, interest rate, and loan tenure using sliders.

Visual Feedback: The current values are displayed dynamically as sliders are moved.

Pie Chart Visualization: A pie chart shows the total payment and total interest after calculation.

Enhanced Styling: The design includes glowing effects, improved colors, and hover animations.

Reset Functionality: A reset button clears all fields and resets to default values.

Responsive Design: The layout adapts well to various screen sizes for better user experience.

Tracking User Inputs: After each calculation, the results are displayed and can be used for tracking.

How to Use

Use the Reset button to clear all fields and start over.

Open the HTML file in a web browser.

Adjust the sliders or enter the values manually.

Click on the Calculate EMI button to see the results and pie chart.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced EMI Calculator</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 20px;
            color: #333;
        }

        h1 {
            text-align: center;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .input-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input[type="number"],
        input[type="text"],
        select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }

        button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        button:hover {
            background-color: #0056b3;
        }

        .hidden {
            display: none;
        }

        .result-card {
            background: #e9ecef;
            padding: 15px;
            border-radius: 5px;
            margin: 10px 0;
        }

        .result-title {
            font-weight: bold;
            font-size: 18px;
        }

        .result-info {
            margin-top: 10px;
        }

        .result-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

        .result-table th,
        .result-table td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: center;
        }

        #emiChart {
            max-height: 400px;
        }

        .savings-calculator {
            margin-top: 30px;
        }

        .loan-comparison {
            margin-top: 30px;
            padding: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .loan-comparison input[type="number"] {
            margin: 5px 0;
        }

        .comparison-result {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
        }

        .comparison-card {
            width: 48%;
            padding: 15px;
            background: #d1e7dd;
            border-radius: 5px;
        }

        @media print {
            button,
            .hidden {
                display: none;
            }

            body {
                margin: 0;
                padding: 10px;
                color: #000;
                background: #fff;
            }

            .result-card,
            .loan-comparison {
                page-break-inside: avoid;
                margin: 0;
                border: none;
                box-shadow: none;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Advanced EMI Calculator</h1>

        <div class="input-group">
            <label for="loanAmount">Loan Amount (₹):</label>
            <input type="number" id="loanAmount" placeholder="Enter loan amount" required>
        </div>

        <div class="input-group">
            <label for="downPayment">Down Payment (₹):</label>
            <input type="number" id="downPayment" placeholder="Enter down payment" required>
        </div>

        <div class="input-group">
            <label for="interestRate">Interest Rate (% per annum):</label>
            <input type="number" id="interestRate" placeholder="Enter interest rate" required>
        </div>

        <div class="input-group">
            <label for="loanTenure">Loan Tenure (Months):</label>
            <input type="number" id="loanTenure" placeholder="Enter loan tenure" required>
        </div>

        <div class="input-group">
            <label for="monthlyIncome">Monthly Income (₹):</label>
            <input type="number" id="monthlyIncome" placeholder="Enter monthly income" required>
        </div>

        <div class="input-group">
            <label for="interestType">Interest Type:</label>
            <select id="interestType">
                <option value="fixed">Fixed</option>
                <option value="floating">Floating</option>
            </select>
        </div>

        <button id="calculateBtn">Calculate EMI</button>
        <button id="resetBtn">Reset</button>
        <button id="printBtn" class="hidden">Print Summary</button>
        <button id="downloadButton" class="hidden">Download Summary</button>

        <div class="hidden" id="emiResult"></div>
        <canvas id="emiChart" class="hidden"></canvas>

        <div class="savings-calculator">
            <h2>Down Payment Savings Calculator</h2>
            <label for="savingsAmount">Monthly Savings (₹):</label>
            <input type="number" id="savingsAmount" placeholder="Enter monthly savings" required>
            <label for="savingsGoal">Savings Goal (₹):</label>
            <input type="number" id="savingsGoal" placeholder="Enter savings goal" required>
            <button id="calculateSavingsBtn">Calculate Savings Time</button>
            <div class="hidden" id="savingsResult"></div>
        </div>

        <div class="loan-comparison">
            <h2>Loan Comparison Tool</h2>
            <label for="compareLoanAmount1">Loan Amount 1 (₹):</label>
            <input type="number" id="compareLoanAmount1" placeholder="Enter loan amount 1" required>
            <label for="compareInterestRate1">Interest Rate 1 (%):</label>
            <input type="number" id="compareInterestRate1" placeholder="Enter interest rate 1" required>
            <label for="compareLoanTenure1">Loan Tenure 1 (Months):</label>
            <input type="number" id="compareLoanTenure1" placeholder="Enter loan tenure 1" required>

            <label for="compareLoanAmount2">Loan Amount 2 (₹):</label>
            <input type="number" id="compareLoanAmount2" placeholder="Enter loan amount 2" required>
            <label for="compareInterestRate2">Interest Rate 2 (%):</label>
            <input type="number" id="compareInterestRate2" placeholder="Enter interest rate 2" required>
            <label for="compareLoanTenure2">Loan Tenure 2 (Months):</label>
            <input type="number" id="compareLoanTenure2" placeholder="Enter loan tenure 2" required>

            <button id="compareLoansBtn">Compare Loans</button>
            <div class="comparison-result hidden" id="comparisonResult"></div>
        </div>

        <div class="hidden" id="errorMessage">Please fill in all fields correctly.</div>
    </div>

    <script>
        const calculateBtn = document.getElementById('calculateBtn');
        const resetBtn = document.getElementById('resetBtn');
        const emiResult = document.getElementById('emiResult');
        const downloadButton = document.getElementById('downloadButton');
        const printButton = document.getElementById('printBtn');
        const errorMessage = document.getElementById('errorMessage');
        const savingsResult = document.getElementById('savingsResult');
        const calculateSavingsBtn = document.getElementById('calculateSavingsBtn');
        const compareLoansBtn = document.getElementById('compareLoansBtn');
        const comparisonResult = document.getElementById('comparisonResult');

        calculateBtn.addEventListener('click', calculateEMI);
        resetBtn.addEventListener('click', resetCalculator);
        downloadButton.addEventListener('click', downloadSummary);
        printButton.addEventListener('click', printSummary);
        calculateSavingsBtn.addEventListener('click', calculateSavingsTime);
        compareLoansBtn.addEventListener('click', compareLoans);

        function calculateEMI() {
            const loanAmount = parseFloat(document.getElementById('loanAmount').value);
            const downPayment = parseFloat(document.getElementById('downPayment').value);
            const interestRate = parseFloat(document.getElementById('interestRate').value) / 100 / 12;
            const loanTenure = parseInt(document.getElementById('loanTenure').value);
            const monthlyIncome = parseFloat(document.getElementById('monthlyIncome').value);

            if (isNaN(loanAmount) || isNaN(downPayment) || isNaN(interestRate) || isNaN(loanTenure) || isNaN(monthlyIncome) || loanAmount <= 0 || downPayment < 0 || interestRate < 0 || loanTenure <= 0 || monthlyIncome <= 0) {
                errorMessage.classList.remove('hidden');
                emiResult.innerHTML = '';
                return;
            } else {
                errorMessage.classList.add('hidden');
            }

            const principal = loanAmount - downPayment;
            const emi = principal * interestRate * Math.pow(1 + interestRate, loanTenure) / (Math.pow(1 + interestRate, loanTenure) - 1);
            const totalPayment = emi * loanTenure;
            const totalInterest = totalPayment - principal;
            const loanEligibility = (monthlyIncome * 0.5) / emi;

            emiResult.innerHTML = `
                <div class="result-card">
                    <div class="result-title">EMI Calculation Result 📈</div>
                    <div class="result-info">
                        Your monthly EMI: <strong>₹${emi.toFixed(2)}</strong><br>
                        Total Payment over the loan tenure: <strong>₹${totalPayment.toFixed(2)}</strong><br>
                        Total Interest Paid: <strong>₹${totalInterest.toFixed(2)}</strong><br>
                        Based on your income, your loan eligibility is approximately: <strong>₹${loanEligibility.toFixed(2)}</strong>
                    </div>
                </div>
            `;

            generateEMIChart(emi, loanTenure, principal);
            downloadButton.classList.remove('hidden');
            printButton.classList.remove('hidden');
            emiResult.classList.remove('hidden');
        }

        function generateEMIChart(emi, loanTenure, principal) {
            const ctx = document.getElementById('emiChart').getContext('2d');
            const labels = [];
            const principalData = [];
            const interestData = [];
            const interestRate = parseFloat(document.getElementById('interestRate').value) / 100 / 12;

            for (let month = 1; month <= loanTenure; month++) {
                labels.push(`Month ${month}`);
                const interest = principal * interestRate;
                const principalPayment = emi - interest;
                principal -= principalPayment;

                principalData.push(principalPayment);
                interestData.push(interest);
            }

            const data = {
                labels: labels,
                datasets: [{
                    label: 'Principal Payment',
                    backgroundColor: 'rgba(75, 192, 192, 0.5)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    data: principalData,
                },
                {
                    label: 'Interest Payment',
                    backgroundColor: 'rgba(255, 99, 132, 0.5)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    data: interestData,
                }]
            };

            const config = {
                type: 'line',
                data: data,
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        title: {
                            display: true,
                            text: 'EMI Breakdown Over Time',
                        },
                    },
                },
            };

            if (window.emiChart) {
                window.emiChart.destroy();
            }
            window.emiChart = new Chart(ctx, config);
            document.getElementById('emiChart').classList.remove('hidden');
        }

        function resetCalculator() {
            document.getElementById('loanAmount').value = '';
            document.getElementById('downPayment').value = '';
            document.getElementById('interestRate').value = '';
            document.getElementById('loanTenure').value = '';
            document.getElementById('monthlyIncome').value = '';
            emiResult.classList.add('hidden');
            downloadButton.classList.add('hidden');
            printButton.classList.add('hidden');
            errorMessage.classList.add('hidden');
            document.getElementById('savingsAmount').value = '';
            document.getElementById('savingsGoal').value = '';
            savingsResult.classList.add('hidden');
            comparisonResult.classList.add('hidden');
            document.getElementById('emiChart').classList.add('hidden');
            if (window.emiChart) {
                window.emiChart.destroy();
            }
        }

        function downloadSummary() {
            const summary = emiResult.innerText;
            const blob = new Blob([summary], { type: 'text/plain' });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = 'EMI_Summary.txt';
            link.click();
        }

        function printSummary() {
            window.print();
        }

        function calculateSavingsTime() {
            const savingsAmount = parseFloat(document.getElementById('savingsAmount').value);
            const savingsGoal = parseFloat(document.getElementById('savingsGoal').value);

            if (isNaN(savingsAmount) || isNaN(savingsGoal) || savingsAmount <= 0 || savingsGoal <= 0) {
                savingsResult.innerHTML = "Please enter valid savings amounts.";
                savingsResult.classList.remove('hidden');
                return;
            }

            const monthsToReachGoal = Math.ceil(savingsGoal / savingsAmount);

            savingsResult.innerHTML = `
                <div class="result-card">
                    <div class="result-title">Savings Time Estimate 💰</div>
                    <div class="result-info">
                        To reach your savings goal of ₹${savingsGoal}, it will take you approximately <strong>${monthsToReachGoal} months</strong> if you save ₹${savingsAmount} each month.
                    </div>
                </div>
            `;
            savingsResult.classList.remove('hidden');
        }

        function compareLoans() {
            const loanAmount1 = parseFloat(document.getElementById('compareLoanAmount1').value);
            const interestRate1 = parseFloat(document.getElementById('compareInterestRate1').value) / 100 / 12;
            const loanTenure1 = parseInt(document.getElementById('compareLoanTenure1').value);

            const loanAmount2 = parseFloat(document.getElementById('compareLoanAmount2').value);
            const interestRate2 = parseFloat(document.getElementById('compareInterestRate2').value) / 100 / 12;
            const loanTenure2 = parseInt(document.getElementById('compareLoanTenure2').value);

            const emi1 = calculateEMIForComparison(loanAmount1, interestRate1, loanTenure1);
            const emi2 = calculateEMIForComparison(loanAmount2, interestRate2, loanTenure2);

            comparisonResult.innerHTML = `
                <div class="comparison-card">
                    <h3>Loan 1 Details</h3>
                    <p>EMI: ₹${emi1.emi.toFixed(2)}</p>
                    <p>Total Payment: ₹${emi1.totalPayment.toFixed(2)}</p>
                    <p>Total Interest: ₹${emi1.totalInterest.toFixed(2)}</p>
                </div>
                <div class="comparison-card">
                    <h3>Loan 2 Details</h3>
                    <p>EMI: ₹${emi2.emi.toFixed(2)}</p>
                    <p>Total Payment: ₹${emi2.totalPayment.toFixed(2)}</p>
                    <p>Total Interest: ₹${emi2.totalInterest.toFixed(2)}</p>
                </div>
            `;
            comparisonResult.classList.remove('hidden');
        }

        function calculateEMIForComparison(loanAmount, interestRate, loanTenure) {
            const emi = loanAmount * interestRate * Math.pow(1 + interestRate, loanTenure) / (Math.pow(1 + interestRate, loanTenure) - 1);
            const totalPayment = emi * loanTenure;
            const totalInterest = totalPayment - loanAmount;

            return { emi, totalPayment, totalInterest };
        }
    </script>
</body>

</html>
HTML

DOWNLOAD CODE

IMAGES

    Leave a Reply

    Your email address will not be published. Required fields are marked *


    error: Content is protected !!
    Scroll to Top
    MacroNepal
    Verified by MonsterInsights