QR Code Data Input Form

Please enter valid data to generate QR code.

'; lastPayload = ''; return; } // Only regenerate if the payload has changed if (payload === lastPayload && qrCodeInstance) return; // 2. Instantiate/Update QR Code qrcodeOutput.innerHTML = ''; // Clear previous code try { qrCodeInstance = new QRCode(qrcodeOutput, { text: payload, width: 250, height: 250, colorDark : "#000000", colorLight : "#ffffff", correctLevel : QRCode.CorrectLevel.H }); lastPayload = payload; } catch (e) { console.error("QRCode generation failed:", e); qrcodeOutput.innerHTML = '

QR Code library error.

'; } }; // --- Download Functions --- const downloadPNG = () => { if (!qrCodeInstance) return; const canvas = qrcodeOutput.querySelector('canvas'); if (!canvas) return; const link = document.createElement('a'); link.download = 'qrcode.png'; link.href = canvas.toDataURL('image/png'); document.body.appendChild(link); link.click(); document.body.removeChild(link); }; const downloadPDF = () => { if (typeof window.jspdf === 'undefined' || typeof window.jspdf.jsPDF === 'undefined') { alert('Error: jsPDF library not loaded.'); return; } if (!qrCodeInstance) return; const canvas = qrcodeOutput.querySelector('canvas'); if (!canvas) return; const { jsPDF } = window.jspdf; const doc = new jsPDF('p', 'mm', 'a4'); const dataURL = canvas.toDataURL('image/png'); const qrSize = 60; // mm const margin = 20; const pageWidth = doc.internal.pageSize.getWidth(); // 1. Title doc.setFontSize(18); doc.setFont(undefined, 'bold'); doc.setTextColor(44, 62, 80); doc.text(`Generated QR Code`, pageWidth / 2, 20, { align: 'center' }); // 2. Image doc.addImage(dataURL, 'PNG', (pageWidth - qrSize) / 2, 30, qrSize, qrSize); // 3. Data Details doc.setFontSize(11); doc.setFont(undefined, 'normal'); doc.setTextColor(52, 73, 94); const payloadLabel = `Encoded Type: ${qrcTypeSelect.value}`; const payloadContent = `Payload: ${lastPayload.length > 50 ? lastPayload.substring(0, 50) + '...' : lastPayload}`; let yPos = 100; doc.setFont(undefined, 'bold'); doc.text(payloadLabel, margin, yPos); yPos += 8; doc.setFont(undefined, 'normal'); const splitText = doc.splitTextToSize(payloadContent, pageWidth - margin * 2); doc.text(splitText, margin, yPos); doc.save('qrcode.pdf'); }; // --- Event Listeners --- // Tab Buttons tabButtons.forEach((btn, index) => { btn.addEventListener('click', () => showTab(index + 1)); }); // Next/Prev Navigation nextBtn.addEventListener('click', () => showTab(currentTab + 1)); prevBtn.addEventListener('click', () => showTab(currentTab - 1)); // Type Switcher qrcTypeSelect.addEventListener('change', updateDynamicForm); // Continuous regeneration (on any input change in the form area) dynamicFormArea.addEventListener('input', generateQRCode); // Download Actions downloadPngBtn.addEventListener('click', downloadPNG); downloadPdfBtn.addEventListener('click', downloadPDF); // --- Initialization --- updateDynamicForm(); generateQRCode(); // We removed the showTab(1) call here because the 'active' class is now in the HTML, // and the tab management relies on the tabs[0] being active by default. });