متعة الآلة الحاسبة: سوء اتخاذ القرار

/* General Body Styles */ body { font-size: 18px; /* 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 */ } /* Corrected Styles for headings in "step" class */ .step h2 { font-size: 20px; /* Adjust the font size as needed */ margin-bottom: 10px; /* Adjust the bottom margin as needed */ color: #333; /* Adjust the color as needed */ font-weight: bold; /* This will make the text bold */ } /* Styles for headings in each step */ h2, h3, step h3., option h2. { font-size: 20px; margin-bottom: 10px; color: #333; font-weight: bold; /* This will make the text bold */ } .step h4 { margin-top: 20px; /* Adjust the top margin to create more space */ margin-top: 10px; margin-bottom: 10px; color: #808080; font-size: 18px; } /* 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 */ } /* Add space after labels */ label { display: block; margin-bottom: 8px; /* Adjust the space as needed */ } /* Text and Label Styles within Steps and Options */ .step li, .step p, .option label, .step label { font-size: 18px; /* Uniform font size for consistency */ margin-bottom: 10px; /* Spacing below elements for clarity */ } /* Text and Label Styles within Steps and Options */ .option input, .option span, .step input { font-size: 18px; /* Uniform font size for consistency */ margin-bottom: 15px; /* 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: 18px; /* Slightly larger font for emphasis */ } /* Disclaimer Section Styles */ .disclaimer { background-color: #ffe8e8; border: 1px solid #d3d3d3; border-radius: 5px; padding: 15px; margin-top: 20px; margin-bottom: 20px; } /* Styles for paragraphs in the disclaimer section */ .disclaimer p { margin-top: 0px; margin-bottom: 0px; font-size: 16px; } /* 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 */ } سمِّ مشتريات غير ضرورية بانتظام اسم العنصر كم تنفق كل شهر بالمتوسط؟ نفقاتك: تنفق في المتوسط: 0 شهريًا هذا يعادل: 0 سنويًا ماذا لو قمت بتوفير واستثمار هذا المبلغ بدلاً من ذلك؟ معدل النمو السنوي المتوسط (%) (الافتراضي هو 6%. يتم الحساب شهريًا): نمو الادخار والاستثمار تنويه: يستخدم معدل الاستثمار النمو السنوي ويتم حسابه شهريًا. هذه الآلة الحاسبة تقدم تقديرات فقط ولا تشكل نصيحة مالية. تذكر أن نمو الادخار سيتأثر بالتضخم. عوائد الاستثمار ليست مضمونة أبدًا وقد تختلف الأسعار سنويًا، وهو ما لا يغطيه هذا الحساب. يجب على المستخدمين النظر في هذه العوامل وطلب النصيحة المالية المهنية. // 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: 'المبلغ', font: { size: 16 }, }, }, x: { title: { display: true, text: 'السنوات', 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