Update qr-generator.js

TMHSDigital · Jul 9, 2024 · 711c49e · 711c49e
1 parent 5f079c4
commit 711c49e
Showing 1 changed file with 27 additions and 12 deletions.
diff --git a/js/qr-generator.js b/js/qr-generator.js
@@ -1,4 +1,9 @@
 const qrInput = document.getElementById('qr-input');
+const qrSize = document.getElementById('qr-size');
+const qrCorrection = document.getElementById('qr-correction');
+const qrColor = document.getElementById('qr-color');
+const qrBgColor = document.getElementById('qr-bg-color');
+const qrRounded = document.getElementById('qr-rounded');
 const generateButton = document.getElementById('generate-button');
 const qrOutput = document.getElementById('qr-output');
 const downloadLink = document.getElementById('download-link');
@@ -8,18 +13,23 @@ let qr = null;
 generateButton.addEventListener('click', () => {
     const inputText = qrInput.value;
     if (inputText) {
-        if (qr) {
-            qr.clear();
-            qr.makeCode(inputText);
-        } else {
-            qr = new QRCode(qrOutput, {
-                text: inputText,
-                width: 256,
-                height: 256,
-                colorDark: "#000000",
-                colorLight: "#ffffff",
-                correctLevel: QRCode.CorrectLevel.H
-            });
+        qrOutput.innerHTML = '';  // Clear previous QR code
+
+        qr = new QRCode(qrOutput, {
+            text: inputText,
+            width: parseInt(qrSize.value),
+            height: parseInt(qrSize.value),
+            colorDark: qrColor.value,
+            colorLight: qrBgColor.value,
+            correctLevel: QRCode.CorrectLevel[qrCorrection.value]
+        });
+
+        // Apply rounded corners if selected
+        if (qrRounded.checked) {
+            setTimeout(() => {
+                const qrImage = qrOutput.querySelector('img');
+                qrImage.style.borderRadius = '15px';
+            }, 50);
         }
 
         // Enable download after a short delay to ensure QR code is generated
@@ -31,3 +41,8 @@ generateButton.addEventListener('click', () => {
         }, 100);
     }
 });
+
+// Update QR code in real-time as options change
+[qrSize, qrCorrection, qrColor, qrBgColor, qrRounded].forEach(element => {
+    element.addEventListener('change', () => generateButton.click());
+});