working with ChatGPT to correct the missing QR preview

rnddave · May 14, 2024 · 9358c59 · 9358c59
1 parent 992daf6
commit 9358c59
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 55 deletions.
diff --git a/index.html b/index.html
@@ -18,12 +18,13 @@ <h1>QR Code Generator</h1>
             <option value="png">PNG</option>
             <option value="svg">SVG</option>
         </select><br><br>
-        <button type="submit">Generate QR Code</button>
     </form>
+    <button id="generate-btn">Generate QR Code</button>
     <div id="qr-preview"></div>
     <a id="download-link" style="display:none;">Download</a>
 
-    <script src="https://cdn.jsdelivr.net/npm/qrcode"></script>
+    <!-- Including the correct QRCode library -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
     <script src="script.js"></script>
 </body>

diff --git a/script.js b/script.js
@@ -1,58 +1,107 @@
-document.getElementById('qr-form').addEventListener('submit', function(event) {
-    event.preventDefault();
-
-    const url = document.getElementById('url').value;
-    const logoFile = document.getElementById('logo').files[0];
-    const format = document.getElementById('format').value;
-
-    const qrCodeDiv = document.createElement('div');
-    qrCodeDiv.id = 'qr-code';
-
-    // Generate the QR code
-    QRCode.toCanvas(qrCodeDiv, url, { errorCorrectionLevel: 'H', width: 300 }, function (error) {
-        if (error) console.error(error);
-
-        const qrCanvas = qrCodeDiv.querySelector('canvas');
-
-        const context = qrCanvas.getContext('2d');
-        const image = new Image();
-
-        const reader = new FileReader();
-        reader.onload = function(e) {
-            image.onload = function() {
-                const logoSize = 50;
-                const x = (qrCanvas.width - logoSize) / 2;
-                const y = (qrCanvas.height - logoSize) / 2;
-                context.drawImage(image, x, y, logoSize, logoSize);
-
-                // Convert to desired format and show preview
-                let imgDataUrl;
-                if (format === 'png') {
-                    imgDataUrl = qrCanvas.toDataURL('image/png');
-                } else if (format === 'svg') {
-                    // For simplicity, we convert the canvas to PNG and then to SVG using html2canvas
-                    html2canvas(qrCanvas).then(canvas => {
-                        imgDataUrl = canvas.toDataURL('image/png');
-                        download(imgDataUrl, `qr_code.${format}`);
-                    });
-                    return;
-                }
+document.addEventListener('DOMContentLoaded', function() {
+    const urlInput = document.getElementById('url');
+    const logoInput = document.getElementById('logo');
+    const formatSelect = document.getElementById('format');
+    const generateButton = document.getElementById('generate-btn');
+
+    urlInput.addEventListener('input', updateQRCode);
+    logoInput.addEventListener('change', updateQRCode);
+    generateButton.addEventListener('click', generateQRCode);
+
+    function updateQRCode() {
+        const url = urlInput.value;
+        const logoFile = logoInput.files[0];
+
+        if (!url || !logoFile) {
+            return;
+        }
+
+        const qrCodeDiv = document.createElement('div');
+        qrCodeDiv.id = 'qr-code';
 
-                displayResult(imgDataUrl, format);
+        QRCode.toCanvas(qrCodeDiv, url, { errorCorrectionLevel: 'H', width: 300 }, function (error) {
+            if (error) console.error(error);
+
+            const qrCanvas = qrCodeDiv.querySelector('canvas');
+            const context = qrCanvas.getContext('2d');
+            const image = new Image();
+
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                image.onload = function() {
+                    const logoSize = 50;
+                    const x = (qrCanvas.width - logoSize) / 2;
+                    const y = (qrCanvas.height - logoSize) / 2;
+                    context.drawImage(image, x, y, logoSize, logoSize);
+
+                    const imgDataUrl = qrCanvas.toDataURL('image/png');
+                    displayPreview(imgDataUrl);
+                }
+                image.src = e.target.result;
             }
-            image.src = e.target.result;
+            reader.readAsDataURL(logoFile);
+        });
+    }
+
+    function displayPreview(imgDataUrl) {
+        const qrPreview = document.getElementById('qr-preview');
+        qrPreview.innerHTML = `<img src="${imgDataUrl}" alt="QR Code Preview" style="max-width: 100%; height: auto;">`;
+    }
+
+    function generateQRCode() {
+        const url = urlInput.value;
+        const logoFile = logoInput.files[0];
+        const format = formatSelect.value;
+
+        if (!url || !logoFile) {
+            alert("Please provide a URL and a logo image.");
+            return;
         }
-        reader.readAsDataURL(logoFile);
-    });
-});
 
-function displayResult(imgDataUrl, format) {
-    const qrPreview = document.getElementById('qr-preview');
-    qrPreview.innerHTML = `<img src="${imgDataUrl}" alt="QR Code Preview">`;
+        const qrCodeDiv = document.createElement('div');
+        qrCodeDiv.id = 'qr-code';
+
+        QRCode.toCanvas(qrCodeDiv, url, { errorCorrectionLevel: 'H', width: 300 }, function (error) {
+            if (error) console.error(error);
+
+            const qrCanvas = qrCodeDiv.querySelector('canvas');
+            const context = qrCanvas.getContext('2d');
+            const image = new Image();
+
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                image.onload = function() {
+                    const logoSize = 50;
+                    const x = (qrCanvas.width - logoSize) / 2;
+                    const y = (qrCanvas.height - logoSize) / 2;
+                    context.drawImage(image, x, y, logoSize, logoSize);
+
+                    let imgDataUrl;
+                    if (format === 'png') {
+                        imgDataUrl = qrCanvas.toDataURL('image/png');
+                    } else if (format === 'svg') {
+                        html2canvas(qrCanvas).then(canvas => {
+                            imgDataUrl = canvas.toDataURL('image/png');
+                            download(imgDataUrl, `qr_code.${format}`);
+                        });
+                        return;
+                    }
 
-    const downloadLink = document.getElementById('download-link');
-    downloadLink.style.display = 'block';
-    downloadLink.href = imgDataUrl;
-    downloadLink.download = `qr_code.${format}`;
-    downloadLink.textContent = `Download as ${format}`;
-}
+                    displayResult(imgDataUrl, format);
+                }
+                image.src = e.target.result;
+            }
+            reader.readAsDataURL(logoFile);
+        });
+    }
+
+    function displayResult(imgDataUrl, format) {
+        displayPreview(imgDataUrl);
+
+        const downloadLink = document.getElementById('download-link');
+        downloadLink.style.display = 'block';
+        downloadLink.href = imgDataUrl;
+        downloadLink.download = `qr_code.${format}`;
+        downloadLink.textContent = `Download as ${format}`;
+    }
+});