Add QR Code Generator by jhanavishukla

Author: jhanavishukla

QRCode/jhanavishukla/README.md

@@ -0,0 +1,23 @@
+QR Code Generator
+A simple and responsive QR Code Generator built using HTML, CSS, and JavaScript. The project allows users to generate QR codes dynamically from user input.
+✨ Features
+- Generate QR codes from user input
+- Simple and intuitive interface
+- Responsive design
+- Interactive JavaScript functionality
+- No backend required
+🛠️ Technologies Used
+- HTML5
+- CSS3
+- JavaScript
+🚀 Getting Started
+Open qrcode.html in your browser.
+You can also use the Live Server extension in VS Code.
+📸 Screenshot
+ 
+👩‍💻 Author
+Jhanavi Shukla
+Computer Science & Engineering Student
+Ramdeobaba University, Nagpur
+GitHub: https://github.com/jhanavishukla
+LinkedIn: https://www.linkedin.com/in/jhanavi-shukla-8b18952ab

QRCode/jhanavishukla/qrcode.css

@@ -0,0 +1,57 @@
+*{
+    padding:0;
+    margin:0;
+    box-sizing:border-box;
+}
+body{
+    background-color:rgb(15, 15, 15);
+    display:flex;
+    justify-content:center;
+    align-items:center;
+    height:100vh;
+    
+}
+.qr-container{
+    background-color:green;
+    padding:20px;
+    border-radius:20px;
+    box-shadow :0 0 10px black;
+    height:500px;
+    width:500px;
+
+
+}
+h2{
+    text-align:center;
+    padding-bottom:20px;
+    font-size:50px;
+}
+#qr-input{
+    display:block;
+    width:100%;
+    margin-bottom:10px;
+    padding:10px;
+    font-size:16px;
+    border-radius:10px;
+    color:black;
+    background-color:white;
+    border:none;
+
+}
+#qr-button{
+    border-radius:10px;
+    display:block;
+    width:100%;
+    color:rgb(130, 121, 121);
+    background-color:rgb(15, 15, 15);
+    padding:10px;
+    border-radius:10px;
+    font-size:16px;
+    box-shadow:0 0 10px black;
+    border:none;
+}
+#qr-img{
+    display:block;
+    margin:20px auto;
+    width:50%;
+}

QRCode/jhanavishukla/qrcode.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QR Code Generator</title>
+    <link rel="stylesheet" href="qrcode.css">
+</head>
+<body>
+    
+    <div class="qr-container">
+        <h2>QR Code Generator</h2>
+        <input type="text" id="qr-input" placeholder="Paste your URL here or type it out">
+        <button id="qr-button">Click here to Generate QR Code</button>
+        <img src="" alt="" id="qr-img">
+    </div>
+    <script src ="qrcode.js"></script>
+</body>
+</html>

QRCode/jhanavishukla/qrcode.js

@@ -0,0 +1,17 @@
+const qrinput=document.getElementById("qr-input")
+const qrimg=document.getElementById("qr-img")
+const qrbutton =document.getElementById("qr-button")
+
+qrbutton.addEventListener("click", () => {
+    const inputvalue=qrinput.value;
+    console.log(inputvalue);
+    if(!inputvalue){
+        alert("Please enter a value to generate QR Code");
+        return;
+    }
+        else{
+            qrimg. src=`https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${inputvalue}`;
+            qrimg.alt=`QR Code for ${inputvalue}`;
+        }
+    
+});