thinkswell · PBJI · Oct 11, 2023 · Oct 11, 2023
diff --git a/QRCode/psykatsamanta/download.png b/QRCode/psykatsamanta/download.png
diff --git a/QRCode/psykatsamanta/index.html b/QRCode/psykatsamanta/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/png" href="download.png" />
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+      crossorigin="anonymous"
+    />
+    <title>QR-Code-Reader-Generator</title>
+  </head>
+  <body>
+    <div class="reader">
+      <div id="container1">
+        <form action="#">
+          <input type="file" hidden />
+          <img src="" alt="image not available" />
+          <div class="upload">
+            <i class="fa-solid fa-cloud-arrow-up"></i>
+            <p>Upload Your QR Code Here</p>
+          </div>
+        </form>
+        <div class="content">
+          <textarea disabled></textarea>
+          <div class="button">
+            <button type="submit" id="reset">Clear</button>
+            <button type="submit" id="copy">Copy Text</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="generator">
+      <div id="container2">
+        <p>Paste a URL or enter text here to create QR Code</p>
+        <div class="form">
+          <input type="text" placeholder="Enter Text Or URL Here" autofocus />
+          <button id="generate">Generate QR Code</button>
+        </div>
+        <div class="qr-code">
+          <img src="" alt="QR Code Not Available" />
+          <button id="download">Download QR Code</button>
+        </div>
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/QRCode/psykatsamanta/script.js b/QRCode/psykatsamanta/script.js
@@ -0,0 +1,107 @@
+let container1 = document.getElementById("container1");
+let form = container1.querySelector("form");
+let fileInput = form.querySelector("input");
+let infoText = form.querySelector("p");
+let QRData = container1.querySelector("textarea");
+let QRImg = form.querySelector("img");
+let copyBtn = document.getElementById("copy");
+let resetBtn = document.getElementById("reset");
+
+form.onclick = () => {
+  fileInput.click();
+};
+
+fileInput.onchange = (e) => {
+  let file = e.target.files[0];
+  if (!file) {
+    return;
+  }
+  let formData = new FormData();
+  formData.append("file", file);
+  fetchRequest(formData, file);
+};
+
+let fetchRequest = (formData, file) => {
+  infoText.innerText = "QR Code is uploading ....";
+  fetch("http://api.qrserver.com/v1/read-qr-code/", {
+    method: "POST",
+    body: formData,
+  })
+    .then((res) => res.json())
+    .then((result) => {
+      result = result[0].symbol[0].data;
+      infoText.innerText = result
+        ? "Upload QR Code To Scan"
+        : "Couldn't Scan QR Code";
+      if (!result) {
+        return;
+      }
+      QRData.innerText = result;
+      QRImg.src = URL.createObjectURL(file);
+      container1.classList.add("active");
+    })
+    .catch(() => {
+      QRData.innerText = "Couldn't Scan The QR Code";
+    });
+};
+
+copyBtn.onclick = () => {
+  let text = QRData.textContent;
+  navigator.clipboard.writeText(text);
+  copyBtn.style.background = "#2532a5";
+  copyBtn.style.color = "#fff";
+  setTimeout(() => {
+    copyBtn.style.background = "#fff";
+    copyBtn.style.color = "#3744bd";
+  }, 100);
+};
+
+resetBtn.onclick = () => {
+  resetBtn.style.background = "#2532a5";
+  resetBtn.style.color = "#fff";
+  setTimeout(() => {
+    resetBtn.style.background = "#fff";
+    resetBtn.style.color = "#3744bd";
+  }, 100);
+  container1.classList.remove("active");
+};
+
+let container2 = document.getElementById("container2");
+let QRText = container2.querySelector(".form input");
+let generateBtn = document.getElementById("generate");
+let qrImg = container2.querySelector(".qr-code img");
+let downloadBtn = document.getElementById("download");
+
+generateBtn.onclick = () => {
+  let QRValue = QRText.value;
+  if (!QRValue) {
+    return;
+  }
+  qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${QRValue}`;
+  qrImg.onload = () => {
+    container2.classList.add("activate");
+  };
+};
+
+downloadBtn.onclick = () => {
+  let ImageURL = `https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=${QRText.value}`;
+  //Fetching the response as a blob
+  fetch(ImageURL)
+    .then((res) => res.blob())
+    .then((file) => {
+      //URL.createObjectURL() creates a url of passed object
+      let tempURL = URL.createObjectURL(file);
+      //Create a anchor element
+      let aTag = document.createElement("a");
+      //Set its url as the tempurl
+      aTag.href = tempURL;
+      //Set the name of the downloaded file as filename
+      aTag.download = file.type;
+      document.body.appendChild(aTag);
+      // console.log(file);
+      // console.log(aTag.download);
+      //Clicking the aTag so that the file download
+      aTag.click();
+      aTag.remove();
+    });
+};
diff --git a/QRCode/psykatsamanta/style.css b/QRCode/psykatsamanta/style.css
@@ -0,0 +1,215 @@
+@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dancing+Script&family=Poppins&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+
+body {
+  position: relative;
+  height: 100vh;
+  background-color: #e3f2fd;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.reader,
+.generator {
+  position: relative;
+  width: 50vw;
+}
+
+#container1 {
+  position: absolute;
+  height: 230px;
+  width: 400px;
+  background-color: #8675e7;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 7px;
+  box-shadow: 10px 10px 10px -5px rgba(0, 0, 0, 0.3);
+  padding: 15px;
+  transition: height 0.2s ease;
+}
+
+#container1.active {
+  height: 450px;
+}
+
+form {
+  position: relative;
+  height: 200px;
+  background-color: #fff;
+  border-radius: 7px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  cursor: pointer;
+}
+
+#container1.active form {
+  pointer-events: none;
+}
+
+form img {
+  position: relative;
+  height: 180px;
+  width: 180px;
+  display: none;
+}
+
+#container1.active form img {
+  display: block;
+}
+
+#container1.active form .upload {
+  position: relative;
+  display: none;
+}
+
+form .upload i {
+  font-size: 3rem;
+  color: #878dc7;
+}
+
+form .upload p {
+  font-size: 18px;
+  margin-top: 10px;
+  color: #878dc7;
+}
+
+.content {
+  margin-top: 15px;
+  /* background-color: red; */
+  height: 200px;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  opacity: 0;
+  user-select: none;
+}
+
+#container1.active .content {
+  opacity: 1;
+  pointer-events: auto;
+  transition: opacity 0.5s 0.05s ease;
+}
+
+.content textarea {
+  width: 100%;
+  height: 70%;
+  resize: none;
+  border-radius: 5px;
+  background-color: transparent;
+  padding: 7px;
+  font-size: 15px;
+  color: #fff;
+  border: 1px solid #fff;
+}
+
+.content .button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.content .button button {
+  padding: 10px;
+  width: calc(100% / 2 - 15px);
+  outline: none;
+  border: none;
+  background-color: #fff;
+  font-size: 16px;
+  color: #3744bd;
+  cursor: pointer;
+}
+
+#container2 {
+  position: absolute;
+  width: 350px;
+  height: 190px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  padding: 15px;
+  border-radius: 7px;
+  box-shadow: 10px 10px 10px -5px rgba(0, 0, 0, 0.3);
+  transition: height 0.2s ease;
+}
+
+#container2.activate {
+  height: 480px;
+}
+
+#container2 p {
+  position: relative;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+#container2 .form {
+  margin: 10px 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+#container2 .form input {
+  width: 100%;
+  padding: 8px;
+  font-size: 16px;
+  outline: none;
+  border: 1px solid #000;
+  border-radius: 5px;
+  margin-bottom: 5px;
+  background-color: transparent;
+}
+
+#container2 .form button,
+#container2 .qr-code button {
+  width: 100%;
+  margin: 10px 0px;
+  height: 40px;
+  font-size: 16px;
+  color: #fff;
+  background: #4754c5;
+  outline: none;
+  border: none;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+#container2 .qr-code button {
+  margin-top: 25px;
+}
+
+#container2 .qr-code img {
+  height: 200px;
+  width: 200px;
+}
+
+#container2 .qr-code {
+  position: relative;
+  /* background-color: #fff; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  user-select: none;
+  padding: 10px;
+  flex-direction: column;
+}
+
+#container2.activate .qr-code {
+  pointer-events: auto;
+  opacity: 1;
+  transition: opacity 0.5s 0.05s ease;
+}