-
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
+}