Osteoporosis Risk Calculator
An educational tool to help assess potential osteoporosis risk factors.
${resultData.category}
General Recommendations
${resultData.recommendations}
`;
const pdfContentEl = document.getElementById('pdf-content').querySelector('.bg-gray-50');
pdfContentEl.classList.remove('low-risk', 'moderate-risk', 'high-risk');
pdfContentEl.classList.add('result-card', resultData.cardClass);
};
/**
* Generates and downloads a PDF of the results, scaled to fit an A4 page.
*/
const generatePdf = () => {
const { jsPDF } = window.jspdf;
const pdfContent = document.getElementById('pdf-content');
const originalBtnText = downloadPdfBtn.innerHTML;
downloadPdfBtn.disabled = true;
downloadPdfBtn.innerHTML = 'Generating...';
pdfErrorMsg.classList.add('hidden');
html2canvas(pdfContent, {
scale: 2, // Use higher scale for better resolution
useCORS: true,
backgroundColor: '#ffffff'
}).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
// Create a new PDF in A4 portrait format
const pdf = new jsPDF({
orientation: 'portrait',
unit: 'pt',
format: 'a4'
});
// Get PDF page dimensions
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
// Define padding
const padding = 40; // 40pt padding on each side
// Calculate the available width and height inside padding
const usableWidth = pdfWidth - (padding * 2);
const usableHeight = pdfHeight - (padding * 2);
// Calculate aspect ratios
const canvasAspectRatio = canvasWidth / canvasHeight;
const usableAreaAspectRatio = usableWidth / usableHeight;
let finalImgWidth, finalImgHeight;
// Determine final image dimensions to fit within the usable area
if (canvasAspectRatio > usableAreaAspectRatio) {
// Image is wider than the usable area
finalImgWidth = usableWidth;
finalImgHeight = finalImgWidth / canvasAspectRatio;
} else {
// Image is taller than or has the same aspect ratio as the usable area
finalImgHeight = usableHeight;
finalImgWidth = finalImgHeight * canvasAspectRatio;
}
// Center the image on the page
const x = (pdfWidth - finalImgWidth) / 2;
const y = (pdfHeight - finalImgHeight) / 2;
// Add the image to the PDF
pdf.addImage(imgData, 'PNG', x, y, finalImgWidth, finalImgHeight);
pdf.save('Osteoporosis-Risk-Assessment.pdf');
// Restore button state
downloadPdfBtn.disabled = false;
downloadPdfBtn.innerHTML = originalBtnText;
}).catch(err => {
console.error("Error generating PDF:", err);
// Restore button state and show error message
downloadPdfBtn.disabled = false;
downloadPdfBtn.innerHTML = originalBtnText;
pdfErrorMsg.textContent = 'Sorry, there was an error creating the PDF.';
pdfErrorMsg.classList.remove('hidden');
});
};
// --- Event Listeners ---
tabs.forEach((tab, index) => {
tab.addEventListener('click', () => {
if (index === (tabs.length - 1) && document.getElementById('results-content').classList.contains('hidden')) {
return;
}
currentTab = index;
updateUI();
});
});
nextBtn.addEventListener('click', () => {
if (validateCurrentTab() && currentTab < tabs.length - 2) {
currentTab++;
updateUI();
}
});
prevBtn.addEventListener('click', () => {
if (currentTab > 0) {
currentTab--;
updateUI();
}
});
calcBtn.addEventListener('click', () => {
if (validateCurrentTab()) {
displayResults();
currentTab++;
updateUI();
}
});
unitSelect.addEventListener('change', handleUnitSwitch);
downloadPdfBtn.addEventListener('click', generatePdf);
// --- Initial Setup ---
updateUI();
handleUnitSwitch();
});