Menstrual Cycle Tracker

Menstrual Cycle Tracker

Log and visualize your cycle to understand your body's rhythm.

Log a Period

Your Stats

Period
Predicted Period
Fertile Window

Log at least two periods to see your stats and predictions.

'; } } function addSampleData() { const today = new Date("2025-08-02T14:14:00+06:00"); periods = [ { startDate: new Date(new Date(today).setMonth(today.getMonth() - 3, 5)), endDate: new Date(new Date(today).setMonth(today.getMonth() - 3, 9)) }, { startDate: new Date(new Date(today).setMonth(today.getMonth() - 2, 3)), endDate: new Date(new Date(today).setMonth(today.getMonth() - 2, 8)) }, { startDate: new Date(new Date(today).setMonth(today.getMonth() - 1, 1)), endDate: new Date(new Date(today).setMonth(today.getMonth() - 1, 5)) }, ]; } // --- PDF DOWNLOAD LOGIC --- async function downloadPDF() { pdfLoader.classList.remove('hidden'); pdfDownloadBtn.disabled = true; const { jsPDF } = window.jspdf; const pdfExportContent = document.getElementById('pdf-export-area'); let periodHistoryHtml = periods.map(p => ` ${p.startDate.toLocaleDateString()} ${p.endDate.toLocaleDateString()} ${p.duration} days ${p.cycleLength ? p.cycleLength + ' days' : 'N/A'} `).reverse().join(''); pdfExportContent.innerHTML = `

Menstrual Cycle Report

Generated on: ${new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}

Avg. Period Duration

${window.cycleStats.avgPeriodDuration} days

Avg. Cycle Length

${window.cycleStats.avgCycleLength} days

Next Predicted Period Starts

${window.cycleStats.nextPeriodStartDate.toLocaleDateString()}

Cycle History

${periodHistoryHtml}
Start DateEnd DateDurationCycle Length
`; await new Promise(resolve => setTimeout(resolve, 100)); try { const canvas = await html2canvas(pdfExportContent, { scale: 2 }); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: "portrait", unit: "pt", format: "a4" }); const pageWidth = pdf.internal.pageSize.getWidth(); const margin = 40; const imgProps = pdf.getImageProperties(imgData); const pdfImageWidth = pageWidth - (margin * 2); const pdfImageHeight = (imgProps.height * pdfImageWidth) / imgProps.width; pdf.addImage(imgData, 'PNG', margin, margin, pdfImageWidth, pdfImageHeight); pdf.save(`Menstrual-Cycle-Report-${new Date().toISOString().slice(0,10)}.pdf`); } catch (error) { console.error("Error generating PDF:", error); alert("Sorry, there was an error creating the PDF."); } finally { pdfLoader.classList.add('hidden'); pdfDownloadBtn.disabled = false; pdfExportContent.innerHTML = ''; } } // --- START THE APP --- initialize(); });
Scroll to Top