Open Calculator `; toolGrid.appendChild(card); }); // 2. MODAL HANDLING toolGrid.addEventListener('click', (e) => { if (e.target.classList.contains('btn')) { const toolId = e.target.getAttribute('data-tool'); openModal(toolId); } }); const closeModal = () => modal.classList.remove('show'); closeBtn.onclick = closeModal; modal.addEventListener('click', (e) => { if (e.target === modal) { closeModal(); } }); function openModal(toolId) { const tool = tools.find(t => t.id === toolId); modalHost.innerHTML = getCalculatorHTML(toolId, tool.title); modal.classList.add('show'); attachCalculatorListener(toolId); } // The rest of the functions (getCalculatorHTML, attachCalculatorListener) remain the same // as they are already scoped within this script and will work correctly. // I am including them here for completeness. function getCalculatorHTML(toolId, title) { let html = `

${title}

`; switch(toolId) { case 'age': case 'chronoAge': html += ` Calculate Age `; break; case 'adsense': html += ` Calculate Earnings `; break; case 'percentage': html += ` Calculate `; break; case 'average': html += ` Calculate Average `; break; case 'salesTax': html += ` Calculate Total `; break; case 'margin': html += ` Calculate Margin `; break; case 'probability': html += ` Calculate Probability `; break; case 'paypalFee': html += `

Based on standard US rate of 2.9% + $0.30.

Calculate Fee `; break; case 'discount': html += ` Calculate Final Price `; break; case 'eps': html += ` Calculate EPS `; break; case 'cpm': html += ` Calculate CPM `; break; case 'ltv': html += ` Calculate LTV `; break; case 'gst': html += ` Calculate `; break; case 'bmi': html += ` Calculate BMI `; break; case 'calorie': html += ` Calculate Calories `; break; case 'salary': html += ` Calculate Breakdown `; break; case 'investment': html += ` Calculate Future Value `; break; } html += ``; return html; } function attachCalculatorListener(toolId) { const calculateBtn = modal.querySelector('#calculateBtn'); const resultDiv = modal.querySelector('#result'); if (!calculateBtn) return; if (toolId === 'bmi') { const unitSelector = modal.querySelector('#bmiUnit'); unitSelector.addEventListener('change', () => { const weightLabel = modal.querySelector('#weightLabel'); const heightLabel = modal.querySelector('#heightLabel'); if (unitSelector.value === 'metric') { weightLabel.textContent = 'Weight (kg):'; heightLabel.textContent = 'Height (cm):'; } else { weightLabel.textContent = 'Weight (lbs):'; heightLabel.textContent = 'Height (in):'; } }); } calculateBtn.addEventListener('click', () => { let resultHTML = ''; try { // All calculator logic is the same as the previous version // It will now correctly find elements inside the modal // as the parent functions are already scoped to the modal. switch(toolId) { case 'age': case 'chronoAge': { const dob = new Date(modal.querySelector('#dob').value); if (isNaN(dob.getTime())) throw new Error("Invalid Date"); let now = new Date(); if (dob > now) throw new Error("Date of birth cannot be in the future."); let years = now.getFullYear() - dob.getFullYear(); let months = now.getMonth() - dob.getMonth(); let days = now.getDate() - dob.getDate(); if (days < 0) { months--; days += new Date(now.getFullYear(), now.getMonth(), 0).getDate(); } if (months < 0) { years--; months += 12; } resultHTML = `You are ${years} years, ${months} months, and ${days} days old.`; break; } case 'adsense': { const impressions = parseFloat(modal.querySelector('#impressions').value); const ctr = parseFloat(modal.querySelector('#ctr').value); const cpc = parseFloat(modal.querySelector('#cpc').value); if (isNaN(impressions) || isNaN(ctr) || isNaN(cpc)) throw new Error("Please fill all fields."); const daily = impressions * (ctr / 100) * cpc; resultHTML = ` Daily: $${daily.toFixed(2)}
Monthly: $${(daily * 30.42).toFixed(2)}
Yearly: $${(daily * 365).toFixed(2)} `; break; } case 'percentage': { const perc = parseFloat(modal.querySelector('#percValue').value); const total = parseFloat(modal.querySelector('#totalValue').value); if (isNaN(perc) || isNaN(total)) throw new Error("Please fill all fields."); const finalValue = (perc / 100) * total; resultHTML = `${perc}% of ${total} is ${finalValue.toLocaleString()}.`; break; } case 'average': { const numbersStr = modal.querySelector('#numbers').value; if (!numbersStr) throw new Error("Please enter numbers."); const numbersArr = numbersStr.split(',').map(n => parseFloat(n.trim())).filter(n => !isNaN(n)); if (numbersArr.length === 0) throw new Error("No valid numbers entered."); const sum = numbersArr.reduce((acc, curr) => acc + curr, 0); const avg = sum / numbersArr.length; resultHTML = `The average is ${avg.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}.`; break; } case 'salesTax': { const price = parseFloat(modal.querySelector('#price').value); const taxRate = parseFloat(modal.querySelector('#taxRate').value); if (isNaN(price) || isNaN(taxRate)) throw new Error("Please fill all fields."); const taxAmount = price * (taxRate / 100); const totalPrice = price + taxAmount; resultHTML = `Tax: $${taxAmount.toFixed(2)}
Total Price: $${totalPrice.toFixed(2)}`; break; } case 'margin': { const cost = parseFloat(modal.querySelector('#cost').value); const revenue = parseFloat(modal.querySelector('#revenue').value); if (isNaN(cost) || isNaN(revenue)) throw new Error("Please fill all fields."); if (revenue === 0) throw new Error("Revenue cannot be zero."); const margin = ((revenue - cost) / revenue) * 100; const profit = revenue - cost; resultHTML = `Gross Profit: $${profit.toFixed(2)}
Profit Margin: ${margin.toFixed(2)}%`; break; } case 'probability': { const favorable = parseInt(modal.querySelector('#outcomes').value); const total = parseInt(modal.querySelector('#totalOutcomes').value); if (isNaN(favorable) || isNaN(total)) throw new Error("Please fill all fields."); if (total === 0) throw new Error("Total outcomes cannot be zero."); if (favorable > total) throw new Error("Favorable outcomes cannot exceed total outcomes."); const prob = (favorable / total) * 100; resultHTML = `Probability: ${prob.toFixed(2)}% (${favorable}/${total})`; break; } case 'paypalFee': { const amount = parseFloat(modal.querySelector('#amount').value); if (isNaN(amount)) throw new Error("Invalid amount."); const fee = (amount * 0.029) + 0.30; const received = amount - fee; resultHTML = `Fee: $${fee.toFixed(2)}
You Receive: $${received.toFixed(2)}`; break; } case 'discount': { const price = parseFloat(modal.querySelector('#origPrice').value); const discount = parseFloat(modal.querySelector('#discountPerc').value); if (isNaN(price) || isNaN(discount)) throw new Error("Please fill all fields."); const saved = price * (discount / 100); const finalPrice = price - saved; resultHTML = `You Save: $${saved.toFixed(2)}
Final Price: $${finalPrice.toFixed(2)}`; break; } case 'eps': { const netIncome = parseFloat(modal.querySelector('#netIncome').value); const dividends = parseFloat(modal.querySelector('#prefDividends').value) || 0; const shares = parseFloat(modal.querySelector('#shares').value); if (isNaN(netIncome) || isNaN(shares)) throw new Error("Please fill Net Income and Shares."); if (shares === 0) throw new Error("Shares cannot be zero."); const eps = (netIncome - dividends) / shares; resultHTML = `Earnings Per Share (EPS) is $${eps.toFixed(2)}.`; break; } case 'cpm': { const cost = parseFloat(modal.querySelector('#cost').value); const impressions = parseFloat(modal.querySelector('#impressions').value); if (isNaN(cost) || isNaN(impressions)) throw new Error("Please fill all fields."); if (impressions === 0) throw new Error("Impressions cannot be zero."); const cpm = (cost / impressions) * 1000; resultHTML = `The CPM is $${cpm.toFixed(2)}.`; break; } case 'ltv': { const loan = parseFloat(modal.querySelector('#loanAmount').value); const value = parseFloat(modal.querySelector('#propertyValue').value); if (isNaN(loan) || isNaN(value)) throw new Error("Please fill all fields."); if (value === 0) throw new Error("Property value cannot be zero."); const ltv = (loan / value) * 100; resultHTML = `The LTV ratio is ${ltv.toFixed(2)}%.`; break; } case 'gst': { const amount = parseFloat(modal.querySelector('#amount').value); const rate = parseFloat(modal.querySelector('#gstRate').value); const type = modal.querySelector('#gstType').value; if (isNaN(amount) || isNaN(rate)) throw new Error("Please fill all fields."); if (type === 'add') { const gstAmount = amount * (rate / 100); const total = amount + gstAmount; resultHTML = `GST: $${gstAmount.toFixed(2)}
Total: $${total.toFixed(2)}`; } else { const original = amount / (1 + rate / 100); const gstAmount = amount - original; resultHTML = `Original Price: $${original.toFixed(2)}
GST Amount: $${gstAmount.toFixed(2)}`; } break; } case 'bmi': { const unit = modal.querySelector('#bmiUnit').value; let weight = parseFloat(modal.querySelector('#weight').value); let height = parseFloat(modal.querySelector('#height').value); if (isNaN(weight) || isNaN(height) || height === 0) throw new Error("Invalid input."); if (unit === 'imperial') { weight *= 0.453592; // lbs to kg height *= 2.54; // in to cm } const heightInMeters = height / 100; const bmi = weight / (heightInMeters * heightInMeters); let category = ''; if (bmi < 18.5) category = 'Underweight'; else if (bmi < 25) category = 'Normal weight'; else if (bmi < 30) category = 'Overweight'; else category = 'Obesity'; resultHTML = `Your BMI is ${bmi.toFixed(1)} (${category}).`; break; } case 'calorie': { const age = parseInt(modal.querySelector('#age').value); const gender = modal.querySelector('#gender').value; const weight = parseFloat(modal.querySelector('#weight').value); const height = parseFloat(modal.querySelector('#height').value); const activity = parseFloat(modal.querySelector('#activity').value); if (isNaN(age) || isNaN(weight) || isNaN(height)) throw new Error("Invalid input."); let bmr = (10 * weight) + (6.25 * height) - (5 * age); bmr += (gender === 'male' ? 5 : -161); const dailyCalories = bmr * activity; resultHTML = `To maintain weight, you need approx. ${Math.round(dailyCalories)} calories/day.`; break; } case 'salary': { const annual = parseFloat(modal.querySelector('#annualSalary').value); if (isNaN(annual)) throw new Error("Invalid salary."); resultHTML = ` Monthly: $${(annual / 12).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}
Weekly: $${(annual / 52).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}
Hourly: $${(annual / 2080).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})} (40h/wk) `; break; } case 'investment': { const p = parseFloat(modal.querySelector('#principal').value); const r = parseFloat(modal.querySelector('#rate').value) / 100; const t = parseFloat(modal.querySelector('#years').value); const n = parseInt(modal.querySelector('#compounding').value); if (isNaN(p) || isNaN(r) || isNaN(t) || isNaN(n)) throw new Error("Please fill all fields."); const futureValue = p * Math.pow(1 + (r / n), n * t); const totalInterest = futureValue - p; resultHTML = `Future Value: $${futureValue.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}
Total Interest: $${totalInterest.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`; break; } } resultDiv.innerHTML = resultHTML; } catch (error) { resultDiv.innerHTML = `Error: ${error.message}`; } }); } })();