feat: add colors

index.html

@@ -43,9 +43,19 @@
             Powered by <a href="https://muathye.com" target="_blank"
                 class="text-blue-500 hover:underline">muathye.com</a>
         </p>
-        <input type="text" id="text-input"
+        <textarea  id="text-input" class="w-full p-2 mb-4 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter text to generate QR code"></textarea>
-            class="w-full p-2 mb-4 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+
-            placeholder="Enter text to generate QR code">
+        <!-- Color Pickers -->
+        <div class="mb-4 flex items-center space-x-4">
+            <div class="flex">
+                <label for="foreground-color" class="inilne mr-1 text-gray-700">Foreground Color:</label>
+                <input type="color" id="foreground-color" value="#000000" class="inline p-1 border border-gray-300 rounded">
+            </div>
+            <div class="flex">
+                <label for="background-color" class="inilne mr-1 text-gray-700">Background Color:</label>
+                <input type="color" id="background-color" value="#FFFFFF" class="inline p-1 border border-gray-300 rounded">
+            </div>
+        </div>
         <button id="generate-btn"
             class="text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2 w-full mb-4">Generate
             QR Code</button>

script.js

@@ -2,13 +2,22 @@ document.getElementById('generate-btn').addEventListener('click', () => {
     const text = document.getElementById('text-input').value;
     const canvas = document.getElementById('qr-code');
     const downloadButtons = document.getElementById('download-buttons');
+    const foregroundColor = document.getElementById('foreground-color').value;
+    const backgroundColor = document.getElementById('background-color').value;
 
     if (text) {
-        QRCode.toCanvas(canvas, text, function (error) {
+        // First, draw the basic QR code
+        QRCode.toCanvas(canvas, text, {
+            color: {
+                dark: foregroundColor,
+                light: backgroundColor
+            }
+        }, function (error) {
             if (error) {
                 console.error(error);
                 return;
             }
+
             console.log('QR code generated!');
             downloadButtons.classList.remove('hidden'); // Show download buttons
         });
@@ -18,8 +27,18 @@ document.getElementById('generate-btn').addEventListener('click', () => {
 // Download QR Code as SVG
 document.getElementById('download-svg').addEventListener('click', () => {
     const text = document.getElementById('text-input').value;
+    const foregroundColor = document.getElementById('foreground-color').value;
+    const backgroundColor = document.getElementById('background-color').value;
+
+    const options = {
+        color: {
+            dark: foregroundColor,
+            light: backgroundColor
+        }
+    };
+
     if (text) {
-        QRCode.toString(text, { type: 'svg' }, function (error, svg) {
+        QRCode.toString(text, { type: 'svg', color: options.color }, function (error, svg) {
             if (error) {
                 console.error(error);
                 return;
@@ -39,25 +58,15 @@ document.getElementById('download-svg').addEventListener('click', () => {
 
 // Download QR Code as PNG
 document.getElementById('download-png').addEventListener('click', () => {
-    const text = document.getElementById('text-input').value;
     const canvas = document.getElementById('qr-code');
-
+    canvas.toBlob(function (blob) {
-    if (text) {
+        const url = URL.createObjectURL(blob);
-        QRCode.toCanvas(canvas, text, function (error) {
+        const link = document.createElement('a');
-            if (error) {
+        link.href = url;
-                console.error(error);
+        link.download = 'qrcode.png';
-                return;
+        document.body.appendChild(link);
-            }
+        link.click();
-            canvas.toBlob(function (blob) {
+        document.body.removeChild(link);
-                const url = URL.createObjectURL(blob);
+        URL.revokeObjectURL(url);
-                const link = document.createElement('a');
+    }, 'image/png');
-                link.href = url;
-                link.download = 'qrcode.png';
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
-                URL.revokeObjectURL(url);
-            }, 'image/png');
-        });
-    }
 });