WORKS-TEST-Lesson 5-GF-Goals

/* More specific CSS rules to hide spin buttons */ #financialGoalsTable .no-spin::-webkit-inner-spin-button, #financialGoalsTable .no-spin::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* Description Box Styles */ .descriptionBox { background-color: #f8f8f8; border: 1px solid #d3d3d3; border-radius: 5px; padding: 15px; margin-bottom: 20px; font-size: 16px; } .descriptionBox h3 { margin-top: 0; margin-bottom: 10px; font-size: 18px; } .descriptionBox ul { margin-top: 5px; margin-bottom: 5px; padding-left: 20px; list-style-type: disc; } .descriptionBox li { margin-bottom: 5px; font-size: 16px; } .descriptionBox p, .descriptionBox li { margin-bottom: 5px; font-size: 16px; } /* Disclaimer Styles */ .disclaimer { background-color: #ffe8e8; border: 1px solid #d3d3d3; border-radius: 5px; padding: 15px; margin-top: 20px; margin-bottom: 20px; font-size: small; } .disclaimer p { margin-top: 0px; margin-bottom: 0px; } /* General styles for buttons */ button, .reset-button-container button { width: 100%; padding: 10px; margin-top: 10px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; } /* Hover effect for buttons */ button:hover, .reset-button-container button:hover { background-color: #0056b3; } /* Table Styles */ #financialGoalsTable .no-spin { -moz-appearance: textfield; } #financialGoalsTable th, #financialGoalsTable td:first-child { min-width: 180px; } #financialGoalsTable th, #financialGoalsTable th { min-width: 30px; } #financialGoalsTable th { min-width: 120px; } #financialGoalsTable th { min-width: 100px; } #financialGoalsTable th { min-width: 80px; } .financialGoalsTableContainer { overflow-x: auto; width: 100%; max-width: 100%; } #financialGoalsTable { width: 100%; border-collapse: collapse; } /* Print Styles */ @media print { .descriptionBox, .buttonContainer { display: none; } #contentToPrint h2 { margin-bottom: 20px; } #financialGoalsTable { margin-bottom: 20px; } /* Ensuring table cells are white in the print version */ #financialGoalsTable, #financialGoalsTable th, #financialGoalsTable td { background-color: white !important; /* Adding !important to override other styles */ color: black !important; /* Ensuring text color is black for better readability */ } /* Resetting any background or color styles on the body */ body { background: white !important; color: black !important; } } Guide to using the Financial Goals Calculator Here's a quick guide to help you get started: Goal Name: Enter the name of your financial goal Target Amount: Enter the estimated total amount for your goal Save Duration: Specify the duration in years and months that you want to achieve the goal Amount Saved So Far: Input any amount you have already saved towards this goal Yearly Growth Rate (%): Optional: If planning to invest your savings to reach this goal, input an expected annual growth %. Monthly Contribution: The calculator will then show you the monthly contribution needed to achieve your goals. Click the button to add more goals and adjust the figures as needed. Don't forget to save your table as a PDF for future reference! Financial Goals Calculator Goal Name Target Amount Save Duration (Years) Save Duration (Months) Amount Saved So Far Yearly Growth Rate (%) Monthly Contribution Needed Add New Goal Save as PDF Reset Fields Note: Yearly Growth Rate (%) compounds monthly by default. Disclaimer: This calculator provides estimations only and does not constitute financial advice. Remember, savings growth may be subject to inflation and investment growth carries uncertainty, neither of which are covered in this calculator. Users must consider these factors and seek professional financial advice. // Define the translations for table headers and calculator title var translations = { 'en': { calculatorTitle: 'Financial Goals Calculator', goalNameHeader: 'Goal Name', totalAmountHeader: 'Target Amount', yearsToSaveHeader: 'Save Duration (Years)', monthsToSaveHeader: 'Save Duration (Months)', savedAlreadyHeader: 'Amount Saved So Far', annualInterestHeader: 'Yearly Growth Rate (%)', monthlySavingNeededHeader: 'Monthly Contribution Needed' }, 'ar': { calculatorTitle: 'حاسبة الأهداف المالية', goalNameHeader: 'اسم الهدف', totalAmountHeader: 'المبلغ المستهدف', yearsToSaveHeader: 'مدة الادخار (سنوات)', monthsToSaveHeader: 'مدة الادخار (أشهر)', savedAlreadyHeader: 'المبلغ المدخر حتى الآن', annualInterestHeader: 'معدل النمو السنوي (%)', monthlySavingNeededHeader: 'المساهمة الشهرية المطلوبة' } }; function resetAllFields() { var table = document.getElementById('financialGoalsTable').getElementsByTagName('tbody'); var rows = table.rows; for (var i = 0; i < rows.length; i++) { var row = rows; row.cells.querySelector('input').value = ''; // Reset Goal Name row.cells.querySelector('input').value = '0'; // Reset Target Amount row.cells.querySelector('input').value = '0'; // Reset Years to Save row.cells.querySelector('input').value = '0'; // Reset Months to Save row.cells.querySelector('input').value = '0'; // Reset Amount Saved So Far row.cells.querySelector('input').value = '0.0'; // Reset Annual Interest Rate row.cells.textContent = '0.00'; // Reset Monthly Saving Needed Display // Optionally trigger any blur events to format the newly reset fields row.cells.querySelector('input').dispatchEvent(new Event('blur')); row.cells.querySelector('input').dispatchEvent(new Event('blur')); } } document.getElementById('resetFieldsButton').addEventListener('click', resetAllFields); // Function to add a new goal row function addGoalRow() { var table = document.getElementById('financialGoalsTable').getElementsByTagName('tbody'); var newRow = table.insertRow(table.rows.length); var langText = translations || translations; newRow.innerHTML = ` 0.00 `; // Attach event listeners to each input field var inputs = newRow.querySelectorAll('input'); inputs.forEach(input => { input.addEventListener('input', function() { calculateSavings(newRow); }); }); } // Function to calculate savings per row function calculateSavings(row) { var totalAmount = parseFloat(row.cells.querySelector('input').value.replace(/,/g, '')) || 0; var yearsToSave = parseFloat(row.cells.querySelector('input').value.replace(/,/g, '')) || 0; var monthsToSave = parseFloat(row.cells.querySelector('input').value.replace(/,/g, '')) || 0; var savedAlready = parseFloat(row.cells.querySelector('input').value.replace(/,/g, '')) || 0; var annualInterest = parseFloat(row.cells.querySelector('input').value.replace(/,/g, '')) || 0; var totalMonths = (yearsToSave * 12) + monthsToSave; // Ensure there's a valid save duration if(totalMonths { input.addEventListener('blur', function () { formatInputValue(this); }); }); // Function to handle input focus function handleInputFocus(input) { // Select the input text when it is clicked input.select(); } // Function to handle input blur function handleInputBlur(input) { if (input.value.trim() !== "") { // Convert the value to a number to remove any non-numeric characters (like previous commas), then format var numericValue = parseFloat(input.value.replace(/,/g, '')); if (!isNaN(numericValue)) { input.value = numericValue.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 2, }); } else { input.value = "0.00"; // Default value if the conversion fails } } else { input.value = "0.00"; // Set to "0.00" if the field is empty } } // Attach this event listener to inputs intended for formatted numbers var formattedNumberInputs = document.querySelectorAll('.formatted-number'); formattedNumberInputs.forEach(input => { input.addEventListener('blur', function () { handleInputBlur(this); }); }); // Function to calculate monthly saving required function calculateMonthlySaving(totalAmount, savedAlready, annualInterest, monthsLeft) { var monthlyRate = annualInterest / 100 / 12; // Convert annual interest rate to monthly if (monthsLeft pageHeight) { pdfWidth = (imgProps.width * pageHeight) / imgProps.height; pdfHeight = pageHeight; } // Adding the image to the pdf. The first two numbers (10, 10) are the x and y coordinates on the PDF where the image will be placed. pdf.addImage(imgData, 'PNG', 10, 10, pdfWidth, pdfHeight); // Save the generated PDF pdf.save('FinancialGoals.pdf'); } // Page load initialization window.onload = function() { addGoalRow(); // Add initial goal row document.getElementById('calculatorTitle').textContent = translations.calculatorTitle; // Attach event listeners to spinner buttons $(document).on('click', '.spinner-years .ui-spinner-button, .spinner-months .ui-spinner-button, .spinner-annual .ui-spinner-button', function() { $(this).siblings('input').trigger('input'); }); };