From dc2f912df75fa4b3b17d529c10da81854c1227db Mon Sep 17 00:00:00 2001 From: Saksham Gupta Date: Thu, 21 Dec 2023 09:09:47 +0530 Subject: [PATCH] Initial Commit --- index.html | 27 +++++++++++++++++ qr-code.png | Bin 0 -> 2884 bytes script.js | 23 +++++++++++++++ styles.css | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 132 insertions(+) create mode 100644 index.html create mode 100644 qr-code.png create mode 100644 script.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..60cd8c2 --- /dev/null +++ b/index.html @@ -0,0 +1,27 @@ + + + + + + QR Code Generator + + + + +
+
+

QR Code Generator

+

Paste a URL or enter text to create QR code

+
+
+ + +
+
+ qr-code +
+
+ + + + \ No newline at end of file diff --git a/qr-code.png b/qr-code.png new file mode 100644 index 0000000000000000000000000000000000000000..156fe5121dabafb4037cd4927c26bbb5846de45d GIT binary patch literal 2884 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 iDwRs5QmIrbRi=Ms76k$$p*Q>h0000 { + let qrValue = qrInput.value; + if(!qrValue) return; + generateBtn.innerText = "Generating QR Code..."; // if the input is empty then return from here + // getting a QR Code of user entered value using the qrserver + // api and passing the api returned img src to qrImg + qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=170x170&data=${qrValue}`; + qrImg.addEventListener("load", () => { + wrapper.classList.add("active"); + generateBtn.innerText = "Generate QR Code"; + }); +}); + +qrInput.addEventListener("keyup", () => { + if(!qrInput.value) { + wrapper.classList.remove("active"); + } +}) diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..693ec17 --- /dev/null +++ b/styles.css @@ -0,0 +1,82 @@ +@import url('https://fonts.googleapis.com/css?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; + align-items: center; + justify-content: center; + min-height: 100vh; + background: #8968cd; +} + +.wrapper { + background: #fff; + max-width: 410px; + border-radius: 7px; + padding: 16px 25px; + height: 260px; + transition: height 0.2s ease; +} + +.wrapper.active { + height: 570px; +} + +header h1 { + font-size: 21px; + font-weight: 500; +} + +header p { + font-size: 16px; + color: #474747; + margin-top: 5px; +} + +.wrapper .form { + margin: 20px 0 25px; +} + +.form :where(input, button){ + width: 100%; + height: 55px; + border: none; + outline: none; + border-radius: 5px; +} + +.form input { + border: 1px solid #999; + font-size: 18px; + padding: 0 17px; +} + +.form button { + color: #fff; + cursor: pointer; + margin-top: 20px; + background: #8968cd; + font-size: 17px; +} + +.wrapper .qr-code { + border: 1px solid #ccc; + padding: 33px 0; + display: flex; + align-items: center; + justify-content: center; + border-radius: 5px; + opacity: 0; + pointer-events: none; +} + +.wrapper.active .qr-code { + opacity: 1; + pointer-events: auto; + transition: opacity 0.5s 0.05s ease; +} \ No newline at end of file