Pottery Glaze Recipe Card

Pottery Glaze Recipe Card

Your recipe will appear here.

Fill out the details in the "Edit Recipe" tab and click "Generate" to create your card.

${elements.mixing.value.replace(/\n/g, '
')}

Application Notes

${elements.application.value.replace(/\n/g, '
')}

Test Tile

Finished Glaze

Test Results

${elements.results.value.replace(/\n/g, '
')}

`; // 4. Display card and switch tab elements.cardOutput.innerHTML = cardHTML; elements.placeholder.style.display = 'none'; elements.cardOutput.style.display = 'block'; elements.pdfArea.style.display = 'block'; showTab(0); }; elements.generateBtn.addEventListener('click', generateCard); // --- PDF DOWNLOAD --- elements.pdfBtn.addEventListener('click', async () => { if (typeof window.jspdf === 'undefined' || typeof window.html2canvas === 'undefined') { return alert('PDF libraries not loaded.'); } elements.pdfBtn.innerHTML = ' Generating...'; elements.pdfBtn.disabled = true; const { jsPDF } = window.jspdf; const cardContent = document.getElementById('pgr-card-render-content'); const editables = cardContent.querySelectorAll('[contenteditable="true"]'); editables.forEach(el => el.setAttribute('contenteditable', 'false')); try { const canvas = await html2canvas(cardContent, { scale: 2 }); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF('p', 'mm', 'a4'); const pdfWidth = pdf.internal.pageSize.getWidth(); const imgProps = pdf.getImageProperties(imgData); const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width; pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight); pdf.save(`${elements.recipeName.value.replace(/\s/g, '_')}_Recipe.pdf`); } catch (error) { console.error(error); alert('Failed to generate PDF.'); } finally { editables.forEach(el => el.setAttribute('contenteditable', 'true')); elements.pdfBtn.innerHTML = ' Download as PDF'; elements.pdfBtn.disabled = false; } }); // --- INITIALIZATION --- populateForm(); generateCard(); showTab(0); });
Scroll to Top