\n QR Code Generator\n

\n\n

\n \n Enter URL:\n \n \n

\n\n \n Generate QR\n \n\n

Scan the QR code above

\n\n {\n // Import QRCode dynamically\n const { default: QRCode } = await import('https://esm.sh/qrcode@1.5.3');\n \n const urlInput = document.getElementById('url-input');\n const generateBtn = document.getElementById('generate-btn');\n const qrContainer = document.getElementById('qr-container');\n const qrCodeDiv = document.getElementById('qr-code');\n \n generateBtn.addEventListener('click', async () => {\n const url = urlInput.value.trim();\n \n if (!url) {\n alert('Please enter a URL');\n return;\n }\n \n // Basic URL validation\n try {\n new URL(url);\n } catch (e) {\n alert('Please enter a valid URL (e.g., https://example.com)');\n return;\n }\n \n try {\n generateBtn.textContent = 'Generating...';\n generateBtn.disabled = true;\n \n // Generate QR code as SVG\n const qrSvg = await QRCode.toString(url, {\n type: 'svg',\n width: 200,\n margin: 2,\n color: {\n dark: '#000000',\n light: '#FFFFFF'\n }\n });\n \n qrCodeDiv.innerHTML = qrSvg;\n } catch (error) {\n console.error('Error generating QR code:', error);\n alert('Error generating QR code. Please try again.');\n } finally {\n generateBtn.textContent = 'Generate QR';\n generateBtn.disabled = false;\n }\n });\n \n // Allow Enter key to generate QR code\n urlInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n generateBtn.click();\n }\n });\n });\n `,\n }}\n />\n \n \n );\n};\n\nexport default function(req: Request) {\n const html = renderToString();\n return new Response(`${html}`, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n}","deleted","label",[98],"permalink","https://www.val.town/x/alexmnps/QRFactory/code/index.tsx","extension","actionData","errors"]