Investment Amount: 0

Estimated Returns: 0

Total Amount: 0

body { font-family: Arial, sans-serif; } .calculator-container { width: 400px; margin: 50px auto; padding: 20px; border: 1px solid #ddd; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .tabs button { width: 50%; padding: 10px; cursor: pointer; background-color: #f1f1f1; border: none; outline: none; } .tabs button.active { background-color: #4CAF50; color: white; } .tab-content { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } .results p { margin: 5px 0; } #chart_div { margin-top: 30px; height: 300px; } google.charts.load('current', { packages: ['corechart'] }); function switchTab(tab) { document.getElementById('sip').style.display = tab === 'sip' ? 'block' : 'none'; document.getElementById('lumpsum').style.display = tab === 'lumpsum' ? 'block' : 'none'; document.getElementById('sipTab').classList.toggle('active', tab === 'sip'); document.getElementById('lumpsumTab').classList.toggle('active', tab === 'lumpsum'); google.charts.setOnLoadCallback(tab === 'sip' ? calculateSIP : calculateLumpsum); } function calculateSIP() { const monthlyInvestment = parseFloat(document.getElementById('monthlyInvestment').value) || 0; const expectedReturn = parseFloat(document.getElementById('expectedReturn').value) / 100 || 0; const timePeriod = parseFloat(document.getElementById('timePeriod').value) || 0; const totalMonths = timePeriod * 12; const monthlyRate = expectedReturn / 12; const investmentAmount = monthlyInvestment * totalMonths; const estimatedReturns = monthlyInvestment * ((Math.pow(1 + monthlyRate, totalMonths) - 1) / monthlyRate) * (1 + monthlyRate); const totalAmount = investmentAmount + estimatedReturns; document.getElementById('sipInvestmentAmount').innerText = investmentAmount.toFixed(2); document.getElementById('sipReturns').innerText = estimatedReturns.toFixed(2); document.getElementById('sipTotalAmount').innerText = totalAmount.toFixed(2); drawChart(investmentAmount, estimatedReturns); } function calculateLumpsum() { const totalInvestment = parseFloat(document.getElementById('totalInvestment').value) || 0; const expectedReturn = parseFloat(document.getElementById('expectedReturnLumpsum').value) / 100 || 0; const timePeriod = parseFloat(document.getElementById('timePeriodLumpsum').value) || 0; const investmentAmount = totalInvestment; const estimatedReturns = totalInvestment * Math.pow(1 + expectedReturn, timePeriod) - totalInvestment; const totalAmount = investmentAmount + estimatedReturns; document.getElementById('lumpsumInvestmentAmount').innerText = investmentAmount.toFixed(2); document.getElementById('lumpsumReturns').innerText = estimatedReturns.toFixed(2); document.getElementById('lumpsumTotalAmount').innerText = totalAmount.toFixed(2); drawChart(investmentAmount, estimatedReturns); } function drawChart(investment, returns) { const data = google.visualization.arrayToDataTable([ ['Type', 'Amount'], ['Investment', investment], ['Returns', returns] ]); const options = { title: 'Investment Breakdown', pieHole: 0.4, colors: ['#4CAF50', '#FF7043'] }; const chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); }