Add Feature: Share Button

README.md

@@ -19,7 +19,8 @@ Want to experience the QRazy-sqaures? Check out the live QRazyness: [QRazy Live
 - **Pre-set QR Code Sizes**: Pre-defined QR code sizes, making it easier to quickly generate a QR code with common dimesnions.
 - **Always Visible Generate Button**: Because nobody likes searching for buttons.
 - **Download Button**: Save your QR code and flaunt it!
-- **Save QR Codes in Different Formats**: Provides users the option to download the QR code in different formats including PNG and JPEG.
+- **Download QR Codes in Different Formats**: Provides users the option to download the QR code in different formats including PNG and JPEG.
+- **Share QR Code**: Allows users to share the QR Code like it's the last slice of pizza.
 - **No Ads**: You won't suffer throught pop-up ads.
 - **Small But Faster**: It's faster than your grandma trying to understand TikTok.
 - **Mobile Friendly**: You can generate QR codes while riding a unicycle or just on your phone.

index.html

@@ -36,7 +36,10 @@ <h1>QRazy</h1>
 
     <div id="qrCode"></div>
 
-    <button id="downloadButton">Download QR Code</button>
+    <div class="download-share-buttons">
+      <button id="downloadButton">Download</button>
+      <button id="shareButton">Share</button>
+    </div>
 
     <div class="footer">
       <p>Made with &hearts; by Misgar-Numan</p>

script.js

@@ -1,27 +1,29 @@
 document.getElementById('generateButton').addEventListener('click', function () {
   const qrText = document.getElementById('qrText').value;
   const qrSize = parseInt(document.getElementById('qrSize').value) || 200; // Default Size: 200
+  const format = document.getElementById('qrFormat').value || 'png'; // Default Format: 'png'
   const qrCodeContainer = document.getElementById('qrCode');
 
-  qrCodeContainer.innerHTML = ''; // Clear previous QR Code
+  // Clear previous QR code
+  qrCodeContainer.innerHTML = '';
 
   if (qrText) {
+    // Generate new QR code using QRious
     const qr = new QRious({
       element: document.createElement('canvas'),
       value: qrText,
       size: qrSize,
-      level: 'H' // High error correction level for better scannability
+      level: 'H'
     });
 
-    qrCodeContainer.appendChild(qr.canvas); // Append canvas to the container
+    qrCodeContainer.appendChild(qr.canvas);
 
-    // Show the download button
-    const downloadButton = document.getElementById('downloadButton');
-    downloadButton.style.display = 'block';
+    // Display download and share buttons
+    document.querySelector('.download-share-buttons').style.display = 'flex';
 
-    // Download QR code
+    // Download QR Code functionality
+    const downloadButton = document.getElementById('downloadButton');
     downloadButton.onclick = function () {
-      const format = document.getElementById('qrFormat').value || 'png'; // Default Format: 'png'
       let mimeType;
       let dataURL;
 
@@ -32,13 +34,34 @@ document.getElementById('generateButton').addEventListener('click', function ()
         mimeType = 'image/jpeg';
         dataURL = qr.canvas.toDataURL(mimeType);
       }
-      
+
       const link = document.createElement('a');
       link.href = dataURL;
       link.download = `QRazyCode.${format}`;
       link.click();
     };
+
+    // Share QR Code functionality
+    const shareButton = document.getElementById('shareButton');
+    shareButton.onclick = function () {
+      qr.canvas.toBlob(function (blob) {
+        const file = new File([blob], `QRazyCode.${format}`, { type: `image/${format}` });
+
+        if (navigator.share) {
+          navigator.share({
+            title: 'QRazy Code',
+            text: 'Check out this QR Code',
+            files: [file]
+          })
+            .then(() => console.log('QR Code Shared Successfully'))
+            .catch((error) => console.log('Error Sharing: ', error));
+        } else {
+          alert('Sharing is not supported on your device or browser.');
+        }
+      }, `image/${format}`);
+    };
+
   } else {
-    alert("Please enter a URL or text to generate a QR code.");
+    alert('Please enter a URL or text to generate a QR code.');
   }
 });

styles.css

@@ -86,12 +86,15 @@ button:hover {
   background-color: #45bca0;
 }
 
-#downloadButton {
+.download-share-buttons {
   display: none;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
 }
 
 #qrCode {
-  margin: 20px;
+  margin: 20px 20px 5px 20px;
 }
 
 #qrCode canvas {
@@ -141,4 +144,17 @@ button:hover {
   .size-format-group {
     flex-direction: column;
   }
+
+  .download-share-buttons {
+    flex-direction: column;
+  }
+
+  #downloadButton,
+  #shareButton {
+    margin-top: 0;
+  }
+
+  #qrCode {
+    margin: 20px 20px 15px 20px;
+  }
 }