From ae9989569a56f3a79dca9f9478a2b29b567d5c86 Mon Sep 17 00:00:00 2001 From: Reza Mehdikhanlou Date: Thu, 16 Mar 2023 22:18:46 +0330 Subject: [PATCH] Adding Day #20 --- Day #20 - QR Code Reader/index.html | 37 +++++++ Day #20 - QR Code Reader/index.js | 44 ++++++++ Day #20 - QR Code Reader/style.css | 150 ++++++++++++++++++++++++++++ 3 files changed, 231 insertions(+) create mode 100644 Day #20 - QR Code Reader/index.html create mode 100644 Day #20 - QR Code Reader/index.js create mode 100644 Day #20 - QR Code Reader/style.css diff --git a/Day #20 - QR Code Reader/index.html b/Day #20 - QR Code Reader/index.html new file mode 100644 index 0000000..00c07e0 --- /dev/null +++ b/Day #20 - QR Code Reader/index.html @@ -0,0 +1,37 @@ + + + + + + + + + + Day #20 - QR Code Reader | AsmrProg + + + + +
+
+ + +
+ +

Upload QR Code To Read

+
+
+
+ +
+ + +
+
+
+ + + + + + \ No newline at end of file diff --git a/Day #20 - QR Code Reader/index.js b/Day #20 - QR Code Reader/index.js new file mode 100644 index 0000000..d0817c1 --- /dev/null +++ b/Day #20 - QR Code Reader/index.js @@ -0,0 +1,44 @@ +const wrapper = document.querySelector(".wrapper"); +const form = document.querySelector("form"); +const fileInp = document.querySelector("input"); +const infoText = document.querySelector("p"); +const closeBtn = document.querySelector(".close"); +const copyBtn = document.querySelector(".copy"); + +// Fecth Data From Api + +function fetchRequest(file, formData) { + infoText.innerText = "Scanning QR Code..."; + 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; + document.querySelector("textarea").innerText = result; + form.querySelector("img").src = URL.createObjectURL(file); + wrapper.classList.add("active"); + }).catch(() => { + infoText.innerText = "Couldn't Scan QR Code..."; + }); +} + +// Send QR Code File With Request To Api +fileInp.addEventListener("change", async e => { + let file = e.target.files[0]; + if (!file) return; + let formData = new FormData(); + formData.append('file', file); + fetchRequest(file, formData); +}); + +// Copy Text To Clipboard +copyBtn.addEventListener("click", () => { + let text = document.querySelector("textarea").textContent; + navigator.clipboard.writeText(text); +}); + +// When user click on form do fileInp Evenetlistener function +form.addEventListener("click", () => fileInp.click()); + +closeBtn.addEventListener("click", () => wrapper.classList.remove("active")); \ No newline at end of file diff --git a/Day #20 - QR Code Reader/style.css b/Day #20 - QR Code Reader/style.css new file mode 100644 index 0000000..97299a5 --- /dev/null +++ b/Day #20 - QR Code Reader/style.css @@ -0,0 +1,150 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap'); + +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body{ + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + padding: 0 10px; + background: #06283d; +} + +.wrapper{ + height: 270px; + width: 420px; + background-color: #334155; + border-radius: 7px; + padding: 30px 30px 35px; + transition: all 0.2s ease; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); +} + +.wrapper.active{ + height: 525px; +} + +.wrapper form{ + height: 210px; + display: flex; + cursor: pointer; + user-select: none; + text-align: center; + border-radius: 7px; + background: #fff; + align-items: center; + justify-content: center; + transition: all 0.2s ease; +} + +.wrapper.active form{ + height: 225px; + pointer-events: none; +} + +form img{ + display: none; + max-width: 148px; +} + +.wrapper.active form img{ + display: block; +} + +.wrapper.active form .content{ + display: none; +} + +form .content i{ + color: #334155; + font-size: 55px; +} + +form .content p{ + color: #334155; + margin-top: 15px; + font-size: 16px; +} + +.wrapper .details{ + opacity: 0; + margin-top: 25px; + pointer-events: none; +} + +.wrapper.active .details{ + opacity: 1; + pointer-events: auto; + transition: opacity 0.5s 0.05s ease; +} + +.details textarea{ + width: 100%; + height: 128px; + outline: none; + resize: none; + color: #fff; + font-size: 18px; + background: none; + border-radius: 5px; + padding: 10px 15px; + border: 1px solid #fff; +} + +textarea::-webkit-scrollbar{ + width: 0px; +} + +textarea:hover::-webkit-scrollbar{ + width: 5px; +} + +textarea:hover::-webkit-scrollbar-track{ + background: none; +} + +textarea:hover::-webkit-scrollbar-thumb{ + background: #fff; + border-radius: 8px; +} + +.details .buttons{ + display: flex; + margin-top: 20px; + align-items: center; + justify-content: space-between; +} + +.buttons button{ + height: 55px; + outline: none; + border: none; + font-weight: 500; + font-size: 16px; + cursor: pointer; + color: #334155; + border-radius: 5px; + background: #fff; + transition: transform 0.3s ease; + width: calc(100% / 2 - 10px); +} + +.buttons button:active{ + transform: scale(0.95); +} + +@media (max-width: 450px){ + .wrapper{ + padding: 25px; + height: 260px; + } + .wrapper.active{ + height: 520px; + } +} \ No newline at end of file