Merge pull request #1214 from Rushabt11/feature/adding-download-option

Feature/adding download option

Author: TusharKesarwani

Projects/QR Code Generator/Index.html

@@ -20,9 +20,13 @@ <h1>QR Code Generator</h1>
         </div>
         <div class="qr-code">
             <img src="" alt="qr-code">
+            <button class="btnshare" title="Share">➡️</button>
         </div>
+        <button class="btnpng">Download Qr</button>
+        
+        
     </div>
-
+    
     <script src="script.js"></script>
 
 </body>

Projects/QR Code Generator/script.js

@@ -1,7 +1,9 @@
 const wrapper = document.querySelector(".generator"),
     qrInput = wrapper.querySelector(".form input"),
     generateBtn = wrapper.querySelector(".form button"),
-    qrImg = wrapper.querySelector(".qr-code img");
+    qrImg = wrapper.querySelector(".qr-code img"),
+    downloadBtn=wrapper.querySelector(".btnpng"),
+    sharebtn=wrapper.querySelector(".btnshare");
 let preValue;
 
 generateBtn.addEventListener("click", () => {
@@ -13,6 +15,8 @@ generateBtn.addEventListener("click", () => {
     qrImg.addEventListener("load", () => {
         wrapper.classList.add("active");
         generateBtn.innerText = "Generate QR Code";
+        downloadBtn.style.display="block";
+      
     });
 });
 
@@ -21,4 +25,33 @@ qrInput.addEventListener("keyup", () => {
         wrapper.classList.remove("active");
         preValue = "";
     }
-});
+});
+downloadBtn.addEventListener('click',async()=>{
+ const response=await fetch(qrImg.src);
+ const blob=await response.blob();
+ const url=URL.createObjectURL(blob);
+ const link=document.createElement('a');
+ link.href=url;
+ link.download="qr.png";
+ link.click();
+ URL.revokeObjectURL(url);
+})
+sharebtn.addEventListener('click',()=>
+{
+    if (navigator.share) {
+        navigator.share({
+            title: "QR Code",
+            url: qrImg.src
+        })
+    .then(function() 
+    {
+    console.log("QR code shared successfully");
+    })
+    .catch(function(error) {
+    console.error("Error sharing QR code:", error);
+            });
+    } 
+    else {
+        console.log("Sharing not supported in this browser.");
+    }
+})

Projects/QR Code Generator/style.css

@@ -26,7 +26,7 @@ body {
 }
 
 .generator.active {
-    height: 530px;
+    height: 600px;
 }
 
 header h1 {
@@ -85,6 +85,7 @@ button) {
     pointer-events: none;
     justify-content: center;
     border: 1px solid #ccc;
+    position: relative;
 }
 
 .generator.active .qr-code {
@@ -96,14 +97,51 @@ button) {
 .qr-code img {
     width: 170px;
 }
+.btnshare{
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background-color: #05ae10;
+    border-radius: 50%;
+    transition: background-color 0.2s ease;
+    font-size: 20px;
+    border: none;
+    color: #fff;
+}
+
+.qr-code:hover .btnshare {
+    background-color: #04a30f;
+    cursor: pointer;
+}
+.btnpng
+{
+    color: #fff;
+    cursor: pointer;
+    margin-top: 20px;
+    font-size: 19px;
+    background: #05ae10;
+    width:100%;
+    height:55px;
+    border:none;
+    outline: none;
+    border-radius: 5px;
+    transition: 0.1s ease-in;
+    display: none;
+}
+
 
 @media (max-width: 430px) {
     .generator {
         height: 255px;
         padding: 16px 20px;
     }
     .generator.active {
-        height: 510px;
+        height: 600px;
     }
     header p {
         color: #696969;
@@ -115,4 +153,8 @@ button) {
     .qr-code img {
         width: 160px;
     }
+    .btnpng
+    {
+    height: 52px;
+    }
 }