Skip to content

Commit

Permalink
Enhanced and modified SIP Calculator (#814)
Browse files Browse the repository at this point in the history
  • Loading branch information
@roysammy123
roysammy123 authored May 24, 2024
1 parent 1ee2091 commit 9b0e130
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 69 deletions.
52 changes: 28 additions & 24 deletions Calculators/Systematic-Investment-Plan-Calculator/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,40 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SIP Calculator</title>
<link rel="stylesheet" href="style.css">
<title>Systematic Investment Plan Calculator</title>
</head>

<body>

<div class="calculator">
<h2>SIP Calculator</h2>
<label for="investmentAmount">Investment Amount (monthly):</label>
<input type="number" id="investmentAmount" placeholder="Enter Investment Amount">

<label for="duration">Investment Duration (in years):</label>
<input type="number" id="duration" placeholder="Enter Investment Duration">

<label for="growthRate">Growth Rate (%):</label>
<input type="number" id="growthRate" placeholder="Enter Growth Rate">

<button onclick="calculateSIP()">Calculate Future Value</button>

<h3>Result:</h3>
<p id="futureValue">Future Value: </p>
<p id="totalInvested">Total Invested: </p>
<p id="gains">Gains: </p>
<div class="container">
<h1>SIP Calculator</h1>
<div class="form-group">
<label for="mode">Investment Mode:</label>
<select id="mode" class="form-control" onchange="toggleInputFields()">
<option value="sip">SIP</option>
<option value="lumpsum">Lumpsum</option>
</select>
</div>
<div class="form-group" id="monthly-investment-group">
<label for="monthly-amount">Monthly Investment Amount:</label>
<input type="number" id="monthly-amount" class="form-control" placeholder="Enter monthly amount">
</div>
<div class="form-group" id="lumpsum-investment-group" style="display:none;">
<label for="amount">Lumpsum Investment Amount:</label>
<input type="number" id="amount" class="form-control" placeholder="Enter amount">
</div>
<div class="form-group">
<label for="rate">Expected Annual Return Rate (%):</label>
<input type="number" id="rate" class="form-control" placeholder="Enter rate">
</div>
<div class="form-group">
<label for="years">Investment Duration (years):</label>
<input type="number" id="years" class="form-control" placeholder="Enter duration">
</div>
<button class="btn" onclick="calculate()">Calculate</button>
<div id="result" class="result"></div>
</div>

<script src="script.js"></script>

</body>

</html>
42 changes: 29 additions & 13 deletions Calculators/Systematic-Investment-Plan-Calculator/script.js
View file
Original file line number Diff line number Diff line change
@@ -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);
}
document.getElementById('result').innerHTML = `<h3>Future Value: ₹${result.toFixed(2)}</h3>`;
}

// Initial setup
toggleInputFields();
74 changes: 42 additions & 32 deletions Calculators/Systematic-Investment-Plan-Calculator/style.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}

0 comments on commit 9b0e130

Please sign in to comment.