Personalized Financial Milestone Budget Tracker

Setup & Milestones


Financial Milestones

Add New Milestone

Income & Expenses (Monthly)

Income

Add Income Source

Total Monthly Income: $0.00

Expenses

Add Expense Item

Total Monthly Expenses: $0.00


Net Monthly Savings: $0.00

Track Contributions


Contributions Log for: N/A

Summary & Overview

Milestone Progress


Budget Summary (Monthly)

Total Income: $0.00

Total Expenses: $0.00

Net Savings: $0.00

Target Date: ${m.targetDate}

` : ''}
`; milestonesSummaryContainer.appendChild(summaryDiv); }); } function renderAllSummaries() { calculateAndRenderBudgetSummary(); // Updates budget part in summary too renderMilestonesSummary(); } // --- PDF Download Function --- function downloadPDF() { const userName = userNameInput.value.trim(); let pdfHtml = ` Financial Summary

Personalized Financial Milestone Budget Tracker

`; if (userName) { pdfHtml += `

Prepared for: ${userName}

`; } pdfHtml += `

Date: ${new Date().toLocaleDateString()}

`; // Milestones Data if (appData.milestones.length > 0) { pdfHtml += `

Milestones Overview

`; pdfHtml += ``; appData.milestones.forEach(m => { const progress = m.target > 0 ? Math.min(100, (m.saved / m.target) * 100) : (m.saved > 0 ? 100 : 0); const remaining = Math.max(0, m.target - m.saved); pdfHtml += ` `; }); pdfHtml += `
MilestoneTarget ($)Saved ($)Remaining ($)Progress
${m.name} ${m.targetDate ? `(Target: ${m.targetDate})` : ''} ${formatCurrency(m.target)} ${formatCurrency(m.saved)} ${formatCurrency(remaining)}
${progress.toFixed(1)}%
`; } else { pdfHtml += `

Milestones Overview

No milestones defined.

`; } // Budget Data const totalIncome = appData.incomeSources.reduce((sum, item) => sum + item.amount, 0); const totalExpenses = appData.expenses.reduce((sum, item) => sum + item.amount, 0); const netSavings = totalIncome - totalExpenses; const netSavingsClass = netSavings >= 0 ? 'text-success' : 'text-danger'; pdfHtml += `

Budget Summary (Monthly)

`; pdfHtml += `

Total Income: $${formatCurrency(totalIncome)}

`; pdfHtml += `

Total Expenses: $${formatCurrency(totalExpenses)}

`; pdfHtml += `

Net Savings: $${formatCurrency(netSavings)}

`; // Optionally list income/expense items if(appData.incomeSources.length > 0){ pdfHtml += `

Income Sources:

    `; appData.incomeSources.forEach(inc => { pdfHtml += `
  • ${inc.name}: $${formatCurrency(inc.amount)}
  • `; }); pdfHtml += `
`; } if(appData.expenses.length > 0){ pdfHtml += `

Expense Items:

    `; appData.expenses.forEach(exp => { pdfHtml += `
  • ${exp.name}: $${formatCurrency(exp.amount)}
  • `; }); pdfHtml += `
`; } pdfHtml += ''; const pdfWindow = window.open('', '_blank'); if (pdfWindow) { pdfWindow.document.write(pdfHtml); pdfWindow.document.close(); // Important for some browsers setTimeout(() => { // Allow content to render before print dialog pdfWindow.print(); }, 500); } else { alert('Could not open PDF window. Please disable your pop-up blocker for this site.'); } } // --- Event Listeners --- if (addMilestoneBtn) addMilestoneBtn.addEventListener('click', handleAddMilestone); if (addIncomeBtn) addIncomeBtn.addEventListener('click', () => createBudgetItem('Income', incomeSourceNameInput, incomeSourceAmountInput, incomeListContainer)); if (addExpenseBtn) addExpenseBtn.addEventListener('click', () => createBudgetItem('Expense', expenseItemNameInput, expenseItemAmountInput, expenseListContainer)); if (addContributionBtn) addContributionBtn.addEventListener('click', handleAddContribution); if (downloadPdfBtn) downloadPdfBtn.addEventListener('click', downloadPDF); if (milestoneSelectForContribution) milestoneSelectForContribution.addEventListener('change', renderContributionsLogForSelectedMilestone); if (userNameInput) userNameInput.addEventListener('change', (e) => { appData.userName = e.target.value; }); // --- Initialization --- function initializeApp() { updateTabDisplay(); if (contributionDateInput) contributionDateInput.value = new Date().toISOString().split('T')[0]; // Default contribution date // Initial renders renderMilestonesList(); renderBudgetItems('income'); renderBudgetItems('expense'); calculateAndRenderBudgetSummary(); renderMilestoneOptionsForContribution(); renderContributionsLogForSelectedMilestone(); // Will show "select milestone" or first one's log renderAllSummaries(); // For summary tab } initializeApp(); }); // End DOMContentLoaded
Scroll to Top