Recurring Deposit Calculator
+
+
+
+
+
+
+
+
+
+
+
+
+ RD Calculator
+ +## 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 :- + + \ No newline at end of file diff --git a/Calculators/RD-Calculator/index.html b/Calculators/RD-Calculator/index.html new file mode 100644 index 000000000..65e9d65c4 --- /dev/null +++ b/Calculators/RD-Calculator/index.html @@ -0,0 +1,43 @@ + + + + + +Total Investment: ₹${totalInvestment.toFixed(2)}
+Total Interest Earned: ₹${interestEarned.toFixed(2)}
+Total Maturity Amount: ₹${maturityAmount.toFixed(2)}
+ `; + 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(); +}); diff --git a/Calculators/RD-Calculator/style.css b/Calculators/RD-Calculator/style.css new file mode 100644 index 000000000..2fbef738d --- /dev/null +++ b/Calculators/RD-Calculator/style.css @@ -0,0 +1,268 @@ +body { + font-family: Arial, sans-serif; + background-color: #ffffff; + padding: 0; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; +} + +.main { + display: flex; + flex-direction: column; + align-items: center; + width: 80%; + height: 90%; + margin: 60px 0; + background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%); + box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); + padding: 20px; + box-sizing: border-box; +} + +.main-container { + display: flex; + flex-direction: row; + align-items: center; + width: 80%; + max-width: 1200px; + padding: 20px; + box-sizing: border-box; +} + +h1 { + text-align: center; + font-size: 30px; + color: #000000; + margin: 20px 0; + width: 100%; +} + +.content { + display: flex; + justify-content: space-between; + width: 100%; +} + +.container, .output-container { + width: 50%; + margin: 18px; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; +} + +canvas { + display: block; + width: 90%; + max-width: 400px; +} + +#rdChart { + width: 250px; + height: 250px; +} + +.result { + padding: 8px; + display: none; + background-color: #0b92fc; + color: white; + margin: 20px 0 40px 0; + width: 80%; + height: 80%; + text-align: center; +} + +.result p { + margin: 10px; + font-size: 17px; +} + +form { + width: 100%; +} + +form label { + display: block; + margin-bottom: 8px; + font-weight: bold; + font-size: 18px; +} + +form input { + width: 70%; + padding: 8px 10px; + margin-bottom: 20px; + box-sizing: border-box; +} + +.button { + display: flex; + justify-content: space-between; + width: 70%; +} + +button { + padding: 10px 20px; + background-color: #ffb521; + color: #ffffff; + border: none; + cursor: pointer; + font-size: 16px; + text-align: center; +} + +button:hover { + background-color: #f7ae1b; +} + +input[type=number]::-webkit-outer-spin-button, +input[type=number]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +input[type=number] { + -moz-appearance: textfield; +} + +/* Media Queries for Mobile Responsiveness */ +@media (max-width: 768px) { + body { + margin: 30px 0 40px; + } + + .main { + margin: 60px 0; + } + + .main, .main-container { + width: 80%; + padding: 8px; + } + + .main-container { + width: 80%; + height: 100%; + margin-bottom: 15px; + flex-direction: column; + padding-bottom: 20px; + } + + .container, .output-container { + width: 80%; + margin: 10px 0; + } + + form input { + width: 100%; + } + + .button { + flex-direction: column; + align-items: center; + width: 100%; + } + + button { + margin: 10px 0; + width: 80%; + } + + #rdChart { + width: 100%; + height: auto; + } + + .output-container { + align-items: center; + justify-content: center; + margin: 20px; + } + + .result { + font-size: 16px; + height: 40%; + width: 100%; + align-items: center; + justify-content: center; + margin-bottom: 15px; + } +} + +@media (max-width: 480px) { + body { + margin: 30px 0 40px; + } + + .main { + margin: 60px 0 90px 0; + height: 100%; + } + + .main, .main-container { + width: 80%; + padding: 8px; + } + + .main-container { + width: 80%; + height: 90%; + flex-direction: column; + padding-bottom: 20px; + } + + .container, .output-container { + width: 80%; + margin: 10px 0; + } + + h1 { + font-size: 24px; + } + + form label { + font-size: 16px; + } + + form input { + font-size: 14px; + } + + .button { + width: 100%; + } + + button { + font-size: 14px; + width: 100%; + } + + #rdChart { + width: 100%; + height: auto; + } + + .result { + font-size: 14px; + height: 40%; + width: 100%; + align-items: center; + justify-content: center; + margin-bottom: 15px; + } + + .output-container { + align-items: center; + justify-content: center; + margin: 20px; + } + + .result p { + font-size: 14px; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 3a894ca7d..06b1adb25 100644 --- a/index.html +++ b/index.html @@ -4218,6 +4218,20 @@
+