HTML code of HDFC SIP Calculator | Calculate Returns on SIP Investments
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>SIP Calculator (INR)</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 500px;
margin: 50px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 10px;
}
input[type=”number”] {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type=”submit”] {
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
input[type=”submit”]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class=”container”>
<h2>SIP Calculator (INR)</h2>
<form id=”sipCalculator”>
<label for=”investmentAmount”>Monthly Investment (INR)</label>
<input type=”number” id=”investmentAmount” required>
<label for=”investmentPeriod”>Investment Period (Years)</label>
<input type=”number” id=”investmentPeriod” required>
<label for=”expectedReturn”>Expected Annual Return (%)</label>
<input type=”number” id=”expectedReturn” required>
<input type=”submit” value=”Calculate SIP Amount”>
</form>
<div id=”result” style=”margin-top: 20px;”></div>
</div>
<script>
document.getElementById(‘sipCalculator’).addEventListener(‘submit’, function(event) {
event.preventDefault();
var investmentAmount = parseFloat(document.getElementById(‘investmentAmount’).value);
var investmentPeriod = parseInt(document.getElementById(‘investmentPeriod’).value);
var expectedReturn = parseFloat(document.getElementById(‘expectedReturn’).value);
var totalMonths = investmentPeriod * 12; // Assuming monthly investment
var monthlyReturn = expectedReturn / 100 / 12; // Monthly return rate
// Calculate total investment amount
var totalInvestment = investmentAmount * totalMonths;
// Calculate future value of investment
var futureValue = 0;
for (var i = 1; i <= totalMonths; i++) {
futureValue += investmentAmount * Math.pow(1 + monthlyReturn, i);
}
var sipAmount = futureValue / totalMonths;
var estimatedReturns = futureValue – totalInvestment;
document.getElementById(‘result’).innerHTML = ‘<p>Investment Amount: ₹’ + totalInvestment.toFixed(2) + ‘</p>’ +
‘<p>Estimated Returns: ₹’ + estimatedReturns.toFixed(2) + ‘</p>’ +
‘<p>Total Value of Investment: ₹’ + futureValue.toFixed(2) + ‘</p>’;
});
</script>
</body>
</html>