completed

Day-10/index.html

@@ -13,7 +13,7 @@
         <div class="qrcode">
             <h1>Enter the Text or URL</h1>
             <input type="text" placeholder="place text or URL text" id="QR-input">
-            <p id="QRcode-img">QR displays here</p>
+            <img id="QR-img">
             <button id="QR-btn" onclick=QRimage()>Click here for QR image</button>
         </div>
     </div>

Day-10/index.js

@@ -1,10 +1,17 @@
 const QRinput = document.getElementById("QR-input");
 const QRImg = document.getElementById("QR-img");
-const QRBtn = document.getElementById("QR-btn");
-
+console.log(QRinput.value.length);
+console.log(QRinput);
 function QRimage() {
-  QRImg.src =
-    "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" +
-    QRinput.value;
+  console.log(QRinput.value.length);
+  if (QRinput.value.length > 0) {
+    QRImg.src =
+      "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" +
+      QRinput.value;
+    QRImg.classList.add("show-img");
+  } else {
+    QRinput.classList.add("error");
+  }
 }
-QRimage();
+
+QRinput.value = "";

Day-10/style.css

@@ -18,7 +18,13 @@
     background-color: antiquewhite;
     position: absolute;
     padding: 40px;
-    margin: 200px 100px;
+    margin: 100px 100px;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    align-items: center;
+    justify-content: center;
+
 }
 
 #QR-btn {
@@ -27,11 +33,40 @@
     padding: 12px 24px;
     border: 2px solid black;
     border-radius: 10px;
+
 }
 
 #QR-input {
     width: 100%;
-    border: none;
-    margin: 20px 0;
+    border: 1px solid black;
+    border-radius: 10px;
     padding: 10px;
+    outline: none;
+}
+
+#QR-img.show-img {
+
+    border: 2px solid black;
+}
+
+.error {
+    animation: shake 0.1s linear 10;
+}
+
+@keyframes shake {
+    0% {
+        transform: translateX(0);
+    }
+
+    25% {
+        transform: translateX(-2px);
+    }
+
+    50% {
+        transform: translateX(2px);
+    }
+
+    100% {
+        transform: translateX(0);
+    }
 }