`;
container.appendChild(card);
});
}
form.addEventListener('submit', (e) => {
e.preventDefault();
const phraseInput = document.getElementById('custom-phrase');
const pronunciationInput = document.getElementById('custom-pronunciation');
phrases.push({
phrase: phraseInput.value,
pronunciation: pronunciationInput.value
});
form.reset();
renderFlashcards();
});
document.getElementById('pdf-download-btn').addEventListener('click', () => {
const { jsPDF } = jspdf;
const pdf = new jsPDF({
orientation: 'portrait',
unit: 'px',
format: 'a4'
});
const pdfContainer = document.getElementById('flashcard-container-pdf');
pdfContainer.innerHTML = ''; // Clear previous
pdfContainer.classList.remove('hidden');
const cardWidth = 190;
const cardHeight = 120;
const margin = 10;
const cardsPerPage = 6;
let htmlContent = '
';
phrases.forEach(p => {
htmlContent += `
`;
});
htmlContent += '
';
pdfContainer.innerHTML = htmlContent;
html2canvas(pdfContainer, { scale: 2 }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
const imgHeight = canvas.height * pdfWidth / canvas.width;
let heightLeft = imgHeight;
let position = 0;
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, imgHeight);
heightLeft -= pdfHeight;
while (heightLeft > 0) {
position = heightLeft - imgHeight;
pdf.addPage();
pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, imgHeight);
heightLeft -= pdfHeight;
}
pdf.save('travel-flashcards.pdf');
pdfContainer.classList.add('hidden');
});
});
renderFlashcards();
});
${p.phrase}
${p.pronunciation || ''}
Translation
