Travel-Friendly Language Learning Flashcards

Generate a printable set of essential phrases for your next trip.

Add a Custom Phrase

${p.phrase}

${p.pronunciation || ''}

Translation

`; 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 += `

${p.phrase}

${p.pronunciation || ''}

Translation

`; }); 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(); });