`;
slidersContainer.innerHTML += sliderHtml;
});
document.querySelectorAll('input[type="range"]').forEach(slider => {
slider.addEventListener('input', (e) => {
const valueDisplay = document.getElementById(`${e.target.dataset.key}-value`);
valueDisplay.textContent = `${e.target.value} servings`;
});
});
}
// --- Calculation Logic ---
function calculateIntake() {
let weeklyOmega3 = 0;
let weeklyTotalFats = 0;
document.querySelectorAll('input[type="range"]').forEach(slider => {
const key = slider.dataset.key;
const servings = parseInt(slider.value);
const item = foodData[key];
weeklyOmega3 += servings * item.omega3;
weeklyTotalFats += servings * item.totalFats;
});
const dailyOmega3 = weeklyOmega3 / 7;
const dailyTotalFats = weeklyTotalFats / 7;
displayResults(dailyOmega3, dailyTotalFats);
}
// --- Results Display ---
function displayResults(omega3, totalFats) {
// Omega-3 Bar
const omega3Percent = Math.min((omega3 / 500) * 100, 100);
document.getElementById('omega3-bar').style.width = `${omega3Percent}%`;
document.getElementById('user-omega3').textContent = omega3.toLocaleString(undefined, {maximumFractionDigits: 0});
// Total Fats Bar
const totalFatsPercent = Math.min((totalFats / 77) * 100, 100);
document.getElementById('total-fats-bar').style.width = `${totalFatsPercent}%`;
document.getElementById('user-total-fats').textContent = totalFats.toLocaleString(undefined, {maximumFractionDigits: 1});
// Recommendations
let omega3Rec, totalFatsRec;
if (omega3 < 250) omega3Rec = recommendations.omega3.low;
else if (omega3 <= 1000) omega3Rec = recommendations.omega3.good;
else omega3Rec = recommendations.omega3.high;
if (totalFats < 44) totalFatsRec = recommendations.totalFats.low;
else if (totalFats <= 77) totalFatsRec = recommendations.totalFats.good;
else totalFatsRec = recommendations.totalFats.high;
document.getElementById('recommendations').innerHTML = `
${omega3Rec}
${totalFatsRec}
`;
resultsSection.style.display = 'block';
resultsSection.scrollIntoView({ behavior: 'smooth' });
}
// --- PDF Generation ---
async function generatePDF() {
const { jsPDF } = window.jspdf;
const originalButtonText = downloadPdfBtn.textContent;
downloadPdfBtn.textContent = 'Generating...';
downloadPdfBtn.disabled = true;
const pdfWrapper = document.createElement('div');
pdfWrapper.style.position = 'absolute';
pdfWrapper.style.left = '-9999px';
pdfWrapper.style.top = '0';
pdfWrapper.style.width = '800px';
pdfWrapper.style.backgroundColor = 'white';
pdfWrapper.className = 'p-8';
pdfWrapper.innerHTML = `
Healthy Fats Intake Report
${new Date().toLocaleDateString()}
`;
const resultsClone = resultsSection.querySelector('.bg-white').cloneNode(true);
resultsClone.querySelector('#download-pdf-btn').parentElement.remove();
pdfWrapper.appendChild(resultsClone);
document.body.appendChild(pdfWrapper);
try {
const canvas = await html2canvas(pdfWrapper, { scale: 2, useCORS: true, logging: false });
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'portrait', unit: 'px', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
const imgWidth = canvas.width;
const imgHeight = canvas.height;
const ratio = imgWidth / imgHeight;
let finalImgWidth = pdfWidth;
let finalImgHeight = pdfWidth / ratio;
if (finalImgHeight > pdfHeight) {
finalImgHeight = pdfHeight;
finalImgWidth = pdfHeight * ratio;
}
pdf.addImage(imgData, 'PNG', 0, 0, finalImgWidth, finalImgHeight);
pdf.save('Healthy-Fats-Report.pdf');
} catch (error) {
console.error("PDF Generation Error:", error);
} finally {
document.body.removeChild(pdfWrapper);
downloadPdfBtn.textContent = 'Download PDF Report';
downloadPdfBtn.disabled = false;
}
}
// --- Event Listeners ---
calculateBtn.addEventListener('click', calculateIntake);
downloadPdfBtn.addEventListener('click', generatePDF);
// --- Initial Call ---
createSliders();
});
