TEST-Lesson 6-GF-Expense-Save

/* General Body Styles */ body { font-size: 16px; /* Default font size for body content */ } /* Styles for Step and Option Containers */ .step, .option { background-color: #f8f8f8; /* Light grey background for separation */ border: 1px solid #d3d3d3; /* Light grey border for definition */ border-radius: 5px; /* Rounded corners for a softer look */ padding: 15px; /* Padding for inner spacing */ margin-bottom: 20px; /* Bottom margin for spacing between elements */ } /* Header Styles for Steps and Options */ .step h2, .step h3, .option h2 { font-size: 18px; /* Slightly larger font size for headers */ margin-bottom: 10px; /* Spacing below headers */ color: #333; /* Dark grey color for text */ } /* List Styles within Steps */ .step ul { margin: 5px 0; /* Vertical spacing for lists */ padding-left: 20px; /* Indentation for list items */ list-style-type: disc; /* Bullet points for items */ } /* Text and Label Styles within Steps and Options */ .step li, .step p, .option label, .option input, .option span, #summaryComparison, #loanResults p, #savingResults p, .step input, .step label, #loanMessage, #investmentMessage { font-size: 16px; /* Uniform font size for consistency */ margin-bottom: 10px; /* Spacing below elements for clarity */ } /* Input Styles for Loan Interest and Investment Growth */ #monthlyExpense, @interestRate, #loanInterest, #investmentGrowth, .option input { width: 100%; /* Full width for alignment */ margin-top: 10px; /* Spacing above for separation */ text-align: center; /* Center text for aesthetics */ margin-bottom: 20px; } /* Input Styles for Range Slider */ .option input { width: 100%; /* Full width for alignment */ margin-top: 10px; /* Spacing above for separation */ margin-bottom: -5px; /* tighten spacing a bit */ text-align: center; /* Center text for aesthetics */ } /* Styles for Number Input Spinners */ input::-webkit-inner-spin-button, input::-webkit-outer-spin-button { -webkit-appearance: inner-spin-button; /* Ensure spinners are visible */ opacity: 1; /* Make spinners fully opaque */ } /* Background Colors for Loan and Saving Options */ #loanOption { background-color: #fff5f5; /* Soft red background for loan option */ } #savingOption { background-color: #f5fff5; /* Soft green background for saving option */ } /* Margin Adjustments for Duration Labels */ .option label, .option label { margin-top: 20px; /* Additional space above for clarity */ display: block; /* Ensure labels are block-level for correct spacing */ } /* Margin Adjustments for Target Amount Text */ .step label { margin-bottom: 20px; /* Additional space below for clarity */ display: block; /* Ensure labels are block-level for correct spacing */ } /* Styles for Month Display and Input Alignment */ #interestRate, #savingDurationValue, #loanDurationValue { display: block; /* Block display for proper alignment */ margin-top: 0; /* No additional top margin */ text-align: center; /* Center-align text for aesthetics */ font-size: 16px; /* Slightly larger font for emphasis */ } /* Disclaimer Section Styles */ .disclaimer { background-color: #ffe8e8; /* Light red background for attention */ border: 1px solid #d3d3d3; /* Light grey border for containment */ border-radius: 5px; /* Rounded corners for consistency */ padding: 5px; /* Inner padding for content spacing */ margin: 20px 0; /* Vertical spacing for separation from other content */ } .disclaimer p { margin: 0; /* Reset margins for disclaimer paragraphs */ font-size: 12px; /* Consistent font size for readability */ line-height: 20px; /* within paragraph */ margin-bottom: 10px; /* between paragraphs */ } /* Input and Display Styles */ #monthlySavingsDisplay, #targetAmount { font-size: 18px; /* Larger font size for focus */ vertical-align: middle; /* Align with adjacent elements */ } canvas { margin-top: 20px; /* Spacing above for separation */ margin-bottom: 30px; /* Additional space below for clarity */ } /* Spinner Removal for Target Amount Input */ .no-spin::-webkit-inner-spin-button, .no-spin::-webkit-outer-spin-button { -webkit-appearance: none; /* Hide spinners for a cleaner look */ margin: 0; /* Reset margin for consistent spacing */ } Name a regular unnecessary purchase Item name How much do you spend each month on average? Your Expense: You spend on average: 0 per month This is equivalent to: 0 per year What if you saved and invested this amount instead? Average Annual Growth Rate (%) (Default is 6%. Compounds monthly): Savings and investment growth Disclaimer: The investment rate uses annual growth and compounds monthly. This calculator provides estimations only and does not constitute financial advice. Remember, savings growth will be impacted by inflation. Investment returns are never guaranteed and rates may vary annually, which is not covered in this calculator. Users must consider these factors and seek professional financial advice. // Initialize the chart with default values upon document load document.addEventListener('DOMContentLoaded', function() { calculateExpense(); // Automatically calculate expense on page load to initialize chart }); // Function to format input with commas and trigger expense calculation function formatWithCommasAndCalculate(inputElement) { let numericValue = inputElement.value.replace(/,/g, ''); numericValue = parseFloat(numericValue); if (!isNaN(numericValue)) { inputElement.value = numericValue.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 2, }); } else { inputElement.value = ""; // Clear input if it's not a valid number } calculateExpense(); // Recalculate expense and investment after formatting } // Main function to calculate the monthly and yearly expense based on user input function calculateExpense() { const inputElement = document.getElementById('monthlyExpense'); let monthlyExpense = inputElement.value.replace(/,/g, ''); // Remove commas for calculation monthlyExpense = parseFloat(monthlyExpense) || 0; const yearlyExpense = monthlyExpense * 12; document.getElementById('monthlyExpenseDisplay').textContent = formatNumber(monthlyExpense); document.getElementById('yearlyExpenseDisplay').textContent = formatNumber(yearlyExpense); calculateInvestment(monthlyExpense); // Update the investment outcome and chart } // Helper function to format numbers for display function formatNumber(number) { return number.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 2, }); } // Calculate the future value of monthly savings with compound interest function calculateInvestment(monthlyExpense) { const annualInterestRate = parseFloat(document.getElementById('interestRate').value) / 100; const monthlyInterestRate = annualInterestRate / 12; const numberOfYears = 20; // Projection over 20 years let savingsData = ; let futureValue = 0; for (let month = 1; month `${i + 1}`), datasets: [{ label: legendLabel, data: savingsData, fill: false, borderColor: 'rgba(75, 192, 192, 1)', backgroundColor: 'rgba(75, 192, 192, 0.5)', borderWidth: 1, }], }, options: { scales: { y: { beginAtZero: true, title: { display: true, text: 'Amount', font: { size: 16 }, }, }, x: { title: { display: true, text: 'Years', font: { size: 16 }, }, }, }, plugins: { legend: { display: false, // hides the legend labels: { font: { size: 14 } }, }, tooltip: { callbacks: { title: function(tooltipItems, data) { return 'Year ' + tooltipItems.label; // Prefix 'Year' to the label on tooltip }, label: function(context) { // Round the value to the nearest whole number for display in the tooltip let roundedValue = Math.round(context.parsed.y); return `${context.dataset.label}: ${roundedValue.toLocaleString()}`; }, }, }, }, }, }); } // Update calculations and chart when monthly expense or interest rate changes document.getElementById('monthlyExpense').addEventListener('input', formatWithCommasAndCalculate); // Bind the input event to format function document.getElementById('interestRate').addEventListener('input', calculateExpense); // Recalculate when interest rate changes