Add files via upload

aadi1232 · Jul 3, 2024 · cf310b0 · cf310b0
1 parent b119ca0
commit cf310b0
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>QR Code Generator Using HTML CSS And JacaScript</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <p>Enter your text or URL</p>
+        <input type="text" placeholder="Text or URL" id="qrtext">
+        <div id="imgbox">
+            <img src=""  id="qrimage">
+        </div>
+        <button onclick="generateQR()">Generate QR Code</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,16 @@
+let imgbox = document.getElementById("imgbox");
+let  qrimage = document.getElementById("qrimage");
+let  qrtext = document.getElementById("qrtext");
+function generateQR(){
+
+    if(qrtext.value.length>0){
+    qrimage.src = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data="+qrtext.value;
+    imgbox.classList.add("show-img");
+    }
+    else{
+         qrtext.classList.add('error');
+         setTimeout(()=>{
+            qrtext.classList.remove('error');
+         },500);
+    }
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,89 @@
+*{
+    margin: 0;
+    padding: 0;
+    font-family: 'poppins',sans-serif;
+    box-sizing: border-box;
+}
+
+body{
+    background-color: #262a2f;
+
+}
+
+.container{
+    width: 400px;
+    padding: 25px 35px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    background: #fff;
+    border-radius: 10px;
+}
+.container p{
+    font-weight: 600;
+    font-size: 15px;
+    margin-bottom: 8px;
+}
+.container input{
+    width: 100%;
+    height: 50px;
+    border: 1px solid #494eea;
+    outline: 0;
+    padding: 10px;
+    margin: 10px 0 20px;
+    border-radius: 5px;
+}
+.container button{
+    width: 100%;
+    height: 50px;
+    background: #494eea;
+    color: #fff;
+    border: 0;
+    outline: 0;
+    border-radius: 5px;
+    box-shadow: 0 10px 10px rgba(0,0,0,0.1);
+    cursor:pointer;
+    margin: 20px 0;
+    font-weight: 500;
+}
+#imgbox{
+    width: 200px;
+    border-radius: 5px;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 1s;
+}
+#imgbox img{
+    width: 100%;
+    padding: 10px;
+
+}
+#imgbox.show-img{
+    max-height: 300px;
+    margin: 10px auto;
+    border: 1px solid#d1d1d1;
+
+}
+.error{
+    animation: shake 0.1s linear 10;
+
+}
+@keyframes shake{
+    0%{
+        transform: translateX(0);
+    }
+    25%{
+        transform: translateX(-2px);
+    } 
+    50%{
+        transform: translateX(0);
+    } 
+    75%{
+        transform: translateX(2px);
+    }
+    100%{
+        transform: translateX(0);
+    }
+
+}