QR generater Created

sagar-io · sagar-io · commit 5a60ac2900cb · 2022-05-11T22:14:12.000+05:30
diff --git a/FileSaver.min.js b/FileSaver.min.js
diff --git a/app.js b/app.js
@@ -0,0 +1,18 @@
+const input = document.querySelector('.qr-text');
+const qrImg = document.querySelector('.qr-img');
+const downloadBtn = document.querySelector('.download-btn');
+
+let userText, link;
+
+function handleQR() {
+    userText = this.value;
+    link =  `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${userText}` ;
+    qrImg.src = link;
+}
+
+input.addEventListener('change', handleQR);
+
+downloadBtn.addEventListener('click', () => {
+    saveAs(link, 'img.png');
+});
+
diff --git a/index.html b/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QR Code Generator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="main-container">
+        <img class = "qr-img" src=" https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=Example" alt="QR Code" />
+        <textarea class="qr-text" name="" id="" cols="27" rows="3" placeholder="Enter your text..."></textarea>
+        <button class="download-btn">Download</button>
+    </div>
+
+<script src="app.js"></script>
+<script src="FileSaver.min.js"></script>
+
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,48 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    width: 100%;
+    height: 100vh;
+    margin: 0;
+    background: linear-gradient(45deg, skyblue, royalblue, blue);
+}
+
+.main-container {
+    font-family: Arial, Helvetica, sans-serif;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 20px;
+    width: 100%;
+    height: 100vh;
+}
+
+.qr-text {
+    font-family: 'Courier New', Courier, monospace;
+    padding: 0.7rem 1rem;
+    font-size: 1rem;
+    background-color: rgb(4, 15, 25);
+    color: white;
+    box-shadow: 0 2px 8px -3px black;
+}
+
+.download-btn {
+    padding: 0.7rem 1rem;
+    font-size: 1rem;
+    font-family:  monospace;
+    font-weight: bold;
+    cursor: pointer;
+    word-spacing: -5px;
+    transform: scale(1);
+    transition: 0.4s;
+    border-radius: 5px;
+    border: none;
+}
+.download-btn:hover {
+    transform: scale(1.1);
+    font-size: 1.1rem;
+}
+
