From 9b0e130909fa4b62cd71d6b29451e7a3275e84d3 Mon Sep 17 00:00:00 2001 From: Soumyajit Roy Date: Fri, 24 May 2024 16:27:49 +0530 Subject: [PATCH] Enhanced and modified SIP Calculator (#814) --- .../index.html | 52 +++++++------ .../script.js | 42 +++++++---- .../style.css | 74 +++++++++++-------- 3 files changed, 99 insertions(+), 69 deletions(-) diff --git a/Calculators/Systematic-Investment-Plan-Calculator/index.html b/Calculators/Systematic-Investment-Plan-Calculator/index.html index 5d9fcc60b..2e66c92b6 100644 --- a/Calculators/Systematic-Investment-Plan-Calculator/index.html +++ b/Calculators/Systematic-Investment-Plan-Calculator/index.html @@ -1,36 +1,40 @@ - + SIP Calculator - Systematic Investment Plan Calculator - - -
-

SIP Calculator

- - - - - - - - - - - -

Result:

-

Future Value:

-

Total Invested:

-

Gains:

+
+

SIP Calculator

+
+ + +
+
+ + +
+ +
+ + +
+
+ + +
+ +
- - - \ No newline at end of file diff --git a/Calculators/Systematic-Investment-Plan-Calculator/script.js b/Calculators/Systematic-Investment-Plan-Calculator/script.js index 5a8aec840..dd07953de 100644 --- a/Calculators/Systematic-Investment-Plan-Calculator/script.js +++ b/Calculators/Systematic-Investment-Plan-Calculator/script.js @@ -1,16 +1,32 @@ -function calculateSIP() { - var investmentAmount = parseFloat(document.getElementById('investmentAmount').value); - var duration = parseInt(document.getElementById('duration').value); - var growthRate = parseFloat(document.getElementById('growthRate').value); +function toggleInputFields() { + const mode = document.getElementById('mode').value; + if (mode === 'sip') { + document.getElementById('monthly-investment-group').style.display = 'block'; + document.getElementById('lumpsum-investment-group').style.display = 'none'; + } else { + document.getElementById('monthly-investment-group').style.display = 'none'; + document.getElementById('lumpsum-investment-group').style.display = 'block'; + } +} - var n = duration * 12; // Total number of payments (considering monthly SIP) - var r = growthRate / (12 * 100); // Monthly interest rate +function calculate() { + const mode = document.getElementById('mode').value; + const rate = parseFloat(document.getElementById('rate').value) / 100; + const years = parseFloat(document.getElementById('years').value); + let result = 0; - var totalInvested = investmentAmount * n; // Total amount invested - var fv = investmentAmount * ((Math.pow((1 + r), n) - 1) / r) * (1 + r); // Future Value formula - var gains = fv - totalInvested; // Gains + if (mode === 'sip') { + const monthlyAmount = parseFloat(document.getElementById('monthly-amount').value); + const months = years * 12; + const monthlyRate = rate / 12; + result = monthlyAmount * ((Math.pow(1 + monthlyRate, months) - 1) / monthlyRate) * (1 + monthlyRate); + } else if (mode === 'lumpsum') { + const amount = parseFloat(document.getElementById('amount').value); + result = amount * Math.pow(1 + rate, years); + } - document.getElementById('futureValue').innerHTML = 'Future Value: ₹' + fv.toFixed(2); - document.getElementById('totalInvested').innerHTML = 'Total Invested: ₹' + totalInvested.toFixed(2); - document.getElementById('gains').innerHTML = 'Gains: ₹' + gains.toFixed(2); -} \ No newline at end of file + document.getElementById('result').innerHTML = `

Future Value: ₹${result.toFixed(2)}

`; +} + +// Initial setup +toggleInputFields(); diff --git a/Calculators/Systematic-Investment-Plan-Calculator/style.css b/Calculators/Systematic-Investment-Plan-Calculator/style.css index e2ea91160..4d8822059 100644 --- a/Calculators/Systematic-Investment-Plan-Calculator/style.css +++ b/Calculators/Systematic-Investment-Plan-Calculator/style.css @@ -1,53 +1,63 @@ body { - font-family: Arial, sans-serif; + font-family: 'Arial', sans-serif; + background: linear-gradient(135deg, #ffcc70, #3b6978); + color: #333; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; - background-color: #e9ffff; } -h2 { - font-size: 3.0em; - margin-block-start: 0.83em; - margin-block-end: 0.83em; - margin-inline-start: 20px; - margin-inline-end: 0px; - font-weight: bold; +.container { + background: white; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + max-width: 400px; + width: 100%; + padding: 20px; + box-sizing: border-box; } -.calculator { - background-color: #a1f4eb; - margin: 30px; - border: 1px solid #050505; - padding: 20px; - border-radius: 8px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +h1 { + text-align: center; + color: #3b6978; } -label { +.form-group { + margin-bottom: 15px; +} + +.form-group label { display: block; - margin-bottom: 8px; + margin-bottom: 5px; + font-weight: bold; } -input { - width: 100%; - padding: 8px; - margin-bottom: 16px; - box-sizing: border-box; +.form-group input, .form-group select { + width: calc(100% - 20px); + padding: 8px 10px; + margin: 5px; + border: 1px solid #ddd; + border-radius: 4px; } -button { - background-color: #020e32; - color: #fff; +.btn { + background: #3b6978; + color: white; + padding: 10px; border: none; - padding: 10px 20px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 16px; + border-radius: 4px; cursor: pointer; + width: 100%; + font-size: 16px; +} + +.result { + margin-top: 20px; + padding: 10px; + background: #f9f9f9; + border: 1px solid #ddd; border-radius: 4px; -} \ No newline at end of file +}