Added RD Calculator (#1803)

Rakesh9100 · Aug 10, 2024 · fb46f9f · fb46f9f
1 parent 1ab7032
commit fb46f9f
Show file tree

Hide file tree

Showing 5 changed files with 466 additions and 0 deletions.
diff --git a/Calculators/RD-Calculator/README.md b/Calculators/RD-Calculator/README.md
@@ -0,0 +1,15 @@
+# <p align="center">RD Calculator</p>
+
+## Description :-
+
+The RD (Recurring Deposit) calculator computes the maturity amount and interest earned on regular monthly deposits over a fixed period, given a specified annual interest rate.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/user-attachments/assets/1cdfc417-de11-477d-ae87-78a28774ed2c)
diff --git a/Calculators/RD-Calculator/index.html b/Calculators/RD-Calculator/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Recurring Deposit Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="main">
+        <h1>Recurring Deposit Calculator</h1>
+        <div class="main-container">
+            <div class="container">
+                <form id="rd-calculator-form">
+                    <label for="monthly-installment">Monthly Installment (₹):</label>
+                    <input type="number" id="monthly-installment" placeholder="Enter Monthly Installment" required>
+
+                    <label for="rate">Annual Interest Rate (%):</label>
+                    <input type="number" id="rate" step="0.01" placeholder="Enter Annual Interest Rate" required>
+
+                    <label for="months">Time Period (in months):</label>
+                    <input type="number" id="months" placeholder="Enter Time Period" required>
+
+                    <div class="button">
+                        <button id="calculate-btn" type="submit">Calculate</button>
+                        <button type="reset" id="reset-btn">Reset</button>
+                    </div>
+                </form>
+            </div>
+
+            <div class="output-container" id="output-container">
+                <div class="canvas">
+                    <canvas id="rdChart"></canvas>
+                </div>
+                <div class="result" id="result"></div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/RD-Calculator/script.js b/Calculators/RD-Calculator/script.js
@@ -0,0 +1,126 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const calculateBtn = document.getElementById('calculate-btn');
+    const resetBtn = document.getElementById('reset-btn');
+    const outputContainer = document.getElementById('output-container');
+    const canvas = document.getElementById('rdChart');
+    const ctx = canvas.getContext('2d');
+    const resultDiv = document.querySelector('.result');
+
+    if (!calculateBtn || !outputContainer || !ctx || !resultDiv) {
+        console.error('Required elements are missing.');
+        return;
+    }
+
+    let chartInstance = null;
+
+    function createChart(totalInvestment, interestEarned) {
+        if (chartInstance) {
+            console.log('Destroying existing chart instance.');
+            chartInstance.destroy();
+        }
+
+        chartInstance = new Chart(ctx, {
+            type: 'doughnut',
+            data: {
+                labels: ['Total Investment', 'Total Interest'],
+                datasets: [{
+                    data: [totalInvestment, interestEarned],
+                    backgroundColor: ['#fcaf17', '#0b92fc'],
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'top',
+                    },
+                    tooltip: {
+                        callbacks: {
+                            label: function(tooltipItem) {
+                                const dataLabel = tooltipItem.label || '';
+                                const value = tooltipItem.raw || 0;
+                                return `${dataLabel}: ₹${value.toFixed(2)}`;
+                            }
+                        }
+                    }
+                },
+                cutout: '50%'
+            }
+        });
+
+        console.log('New chart instance created.');
+    }
+
+    function updateResult(totalInvestment, interestEarned, maturityAmount) {
+        resultDiv.innerHTML = ` 
+            <h2>Results:</h2>
+            <p><strong>Total Investment:</strong> ₹${totalInvestment.toFixed(2)}</p>
+            <p><strong>Total Interest Earned:</strong> ₹${interestEarned.toFixed(2)}</p>
+            <p><strong>Total Maturity Amount:</strong> ₹${maturityAmount.toFixed(2)}</p>
+        `;
+        resultDiv.style.display = 'block';
+    }
+
+    function loadChartData() {
+        const storedData = localStorage.getItem('chartData');
+        if (storedData) {
+            const data = JSON.parse(storedData);
+            outputContainer.style.display = 'block';
+            updateResult(data.totalInvestment, data.interestEarned, data.totalInvestment + data.interestEarned);
+            createChart(data.totalInvestment, data.interestEarned);
+
+            localStorage.removeItem('chartData');
+        }
+    }
+
+    calculateBtn.addEventListener('click', function(event) {
+        event.preventDefault();
+
+        const monthlyInstallment = parseFloat(document.getElementById('monthly-installment').value);
+        const annualRate = parseFloat(document.getElementById('rate').value);
+        const months = parseInt(document.getElementById('months').value);
+
+        if (isNaN(monthlyInstallment) || monthlyInstallment <= 0 ||
+            isNaN(annualRate) || annualRate <= 0 ||
+            isNaN(months) || months <= 0) {
+            alert('Please enter valid values.');
+            return;
+        }
+
+        const monthlyRate = annualRate / 12 / 100;
+        let maturityAmount = 0;
+
+        for (let i = 0; i < months; i++) {
+            maturityAmount += monthlyInstallment * Math.pow(1 + monthlyRate, months - i);
+        }
+
+        const totalInvestment = monthlyInstallment * months;
+        const interestEarned = maturityAmount - totalInvestment;
+
+        localStorage.setItem('chartData', JSON.stringify({
+            totalInvestment: totalInvestment,
+            interestEarned: interestEarned
+        }));
+
+        outputContainer.style.display = 'block';
+        updateResult(totalInvestment, interestEarned, maturityAmount);
+        createChart(totalInvestment, interestEarned);
+    });
+
+    resetBtn.addEventListener('click', function(event) {
+        event.preventDefault();
+        document.getElementById('monthly-installment').value = '';
+        document.getElementById('rate').value = '';
+        document.getElementById('months').value = '';
+
+        if (chartInstance) {
+            chartInstance.destroy();
+            chartInstance = null;
+        }
+        resultDiv.innerHTML = '';
+        outputContainer.style.display = 'none';
+    });
+
+    loadChartData();
+});