From bc8341b2677d6d2023a091ebc419897bbecf2be8 Mon Sep 17 00:00:00 2001 From: suswar123 <88395231+suswar123@users.noreply.github.com> Date: Sat, 29 Oct 2022 02:36:09 +0530 Subject: [PATCH] Add files via upload --- index.html | 27 ++++++++++++++ script.js | 24 +++++++++++++ style.css | 103 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 154 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..f0e8b69 --- /dev/null +++ b/index.html @@ -0,0 +1,27 @@ + + + + + QR Code Generator in JavaScript | CodingNepal + + + + +
+
+

QR Code Generator

+

Paste a url or enter text to create QR code

+
+
+ + +
+
+ qr-code +
+
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..5a53ae4 --- /dev/null +++ b/script.js @@ -0,0 +1,24 @@ +const wrapper = document.querySelector(".wrapper"), +qrInput = wrapper.querySelector(".form input"), +generateBtn = wrapper.querySelector(".form button"), +qrImg = wrapper.querySelector(".qr-code img"); +let preValue; + +generateBtn.addEventListener("click", () => { + let qrValue = qrInput.value.trim(); + if(!qrValue || preValue === qrValue) return; + preValue = qrValue; + generateBtn.innerText = "Generating QR Code..."; + qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrValue}`; + qrImg.addEventListener("load", () => { + wrapper.classList.add("active"); + generateBtn.innerText = "Generate QR Code"; + }); +}); + +qrInput.addEventListener("keyup", () => { + if(!qrInput.value.trim()) { + wrapper.classList.remove("active"); + preValue = ""; + } +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..ba31da3 --- /dev/null +++ b/style.css @@ -0,0 +1,103 @@ +/* Import Google Font - Poppins */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +body{ + display: flex; + padding: 0 10px; + min-height: 100vh; + align-items: center; + background: #3498DB; + justify-content: center; +} +.wrapper{ + height: 265px; + max-width: 410px; + background: #fff; + border-radius: 7px; + padding: 20px 25px 0; + transition: height 0.2s ease; + box-shadow: 0 10px 30px rgba(0,0,0,0.1); +} +.wrapper.active{ + height: 530px; +} +header h1{ + font-size: 21px; + font-weight: 500; +} +header p{ + margin-top: 5px; + color: #575757; + font-size: 16px; +} +.wrapper .form{ + margin: 20px 0 25px; +} +.form :where(input, button){ + width: 100%; + height: 55px; + border: none; + outline: none; + border-radius: 5px; + transition: 0.1s ease; +} +.form input{ + font-size: 18px; + padding: 0 17px; + border: 1px solid #999; +} +.form input:focus{ + box-shadow: 0 3px 6px rgba(0,0,0,0.13); +} +.form input::placeholder{ + color: #999; +} +.form button{ + color: #fff; + cursor: pointer; + margin-top: 20px; + font-size: 17px; + background: #3498DB; +} +.qr-code{ + opacity: 0; + display: flex; + padding: 33px 0; + border-radius: 5px; + align-items: center; + pointer-events: none; + justify-content: center; + border: 1px solid #ccc; +} +.wrapper.active .qr-code{ + opacity: 1; + pointer-events: auto; + transition: opacity 0.5s 0.05s ease; +} +.qr-code img{ + width: 170px; +} + +@media (max-width: 430px){ + .wrapper{ + height: 255px; + padding: 16px 20px; + } + .wrapper.active{ + height: 510px; + } + header p{ + color: #696969; + } + .form :where(input, button){ + height: 52px; + } + .qr-code img{ + width: 160px; + } +} \ No newline at end of file