Q: ${card.question}

A: ${card.answer}

`; elements.reviewList.appendChild(cardElement); }); } else { elements.noReviewMsg.classList.remove('hidden'); } switchTab('results'); }; /** * Handles the PDF download functionality. */ const downloadPDF = async () => { const { jsPDF } = window.jspdf; // 1. Create content for the PDF in a structured way elements.pdfContent.innerHTML = ''; // Clear previous content elements.pdfContent.classList.remove('hidden'); // Make it visible for html2canvas let pdfHTML = ``; elements.pdfContent.innerHTML = pdfHTML; // 2. Use html2canvas to render the content try { const canvas = await html2canvas(elements.pdfContent, { scale: 2 }); // Increase scale for better quality const imgData = canvas.toDataURL('image/png'); // 3. Create a PDF and add the rendered image const pdf = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const canvasWidth = canvas.width; const canvasHeight = canvas.height; const ratio = canvasWidth / canvasHeight; const imgWidth = pdfWidth - 40; // with margin const imgHeight = imgWidth / ratio; let heightLeft = imgHeight; let position = 20; // top margin pdf.addImage(imgData, 'PNG', 20, position, imgWidth, imgHeight); heightLeft -= (pdfHeight - 40); while (heightLeft > 0) { position = heightLeft - imgHeight + 20; // Adjust position for next page pdf.addPage(); pdf.addImage(imgData, 'PNG', 20, position, imgWidth, imgHeight); heightLeft -= (pdfHeight - 40); } pdf.save('flashcard-set.pdf'); } catch (error) { console.error("Error generating PDF:", error); } finally { // 4. Clean up elements.pdfContent.classList.add('hidden'); elements.pdfContent.innerHTML = ''; } }; // --- EVENT LISTENERS --- // Tab navigation elements.tabButtons.create.addEventListener('click', () => switchTab('create')); elements.tabButtons.study.addEventListener('click', startStudySession); elements.tabButtons.results.addEventListener('click', finishSession); // 'Create' tab listeners elements.addCardBtn.addEventListener('click', handleAddCard); elements.cardList.addEventListener('click', handleRemoveCard); elements.generateStudyBtn.addEventListener('click', startStudySession); // 'Study' tab listeners elements.flashcard.addEventListener('click', () => elements.flashcard.classList.toggle('is-flipped')); elements.goToCreateBtn.addEventListener('click', () => switchTab('create')); elements.prevCardBtn.addEventListener('click', () => { if (currentCardIndex > 0) { currentCardIndex--; showCard(currentCardIndex); } }); elements.nextCardBtn.addEventListener('click', () => { if (currentCardIndex < flashcards.length - 1) { currentCardIndex++; showCard(currentCardIndex); } }); elements.reviewBtn.addEventListener('click', () => { if(flashcards[currentCardIndex]) { flashcards[currentCardIndex].status = 'review'; elements.nextCardBtn.click(); // Automatically move to next card } }); elements.knownBtn.addEventListener('click', () => { if(flashcards[currentCardIndex]) { flashcards[currentCardIndex].status = 'known'; elements.nextCardBtn.click(); // Automatically move to next card } }); elements.finishSessionBtn.addEventListener('click', finishSession); // 'Results' tab listeners elements.downloadPdfBtn.addEventListener('click', downloadPDF); elements.studyAgainBtn.addEventListener('click', startStudySession); // --- INITIALIZATION --- renderCardList(); // Initial render to show empty state switchTab('create'); // Start on the create tab });