Merge pull request #434 from Sneha123-zudo/code

Added a QR code Generator
Priyanshi662 · Feb 25, 2024 · 9063ecd · 9063ecd
2 parents ac3da87 + 21af3a0
commit 9063ecd
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 0 deletions.
diff --git a/QRcode/index.html b/QRcode/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fun Fusion</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="../images/funfusion-logo.png" type="image/x-icon">
+</head>
+
+<body>
+    <div class="container">
+        <p>Enter your trxt or URL</p>
+        <input type="text" placeholder="Text or URL" id="qrText">
+        <div id="imgBox">
+            <img src="" alt="" id="qrImage">
+        </div>
+        <button onclick="generateQR()">Generate QR Code</button>
+    </div>
+    <script>
+        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=Example" + qrText.value;
+                imgBox.classList.add("show-img");
+            }
+            else {
+                qrText.classList.add('error');
+                setTimeout(() => {
+                    qrText.classList.remove('error');
+                }, 1000);
+            }
+        }
+
+
+    </script>
+</body>
+
+</html>
diff --git a/QRcode/style.css b/QRcode/style.css
@@ -0,0 +1,83 @@
+*{
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins', sans-serif;
+    box-sizing: border-box;
+}
+body{
+    background: #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);
+    }
+    70%{
+        transform: translateX(2px);
+    }
+    100%{
+        transform: translateX(0);
+    }
+}
diff --git a/index.html b/index.html
@@ -794,6 +794,12 @@ <h2>Alarm Clock</h2>
             <!-- Button to navigate to page1.html -->
             <button onclick="window.location.href='./alarmclock/index.html'">Go!</button><br>
         </div>
+        <div class="card" data-aos="zoom-out-up">
+            <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=Example">
+            <h2>QR <Code></Code> Generator</h2>
+            <!-- Button to navigate to page1.html -->
+            <button onclick="window.location.href='./QRcode/index.html'">Go!</button><br>
+        </div>
 
         <div class="card" data-aos="zoom-out-up">
             <img src="./STOPWATCH/Image.png">