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 0000000..156fe51 Binary files /dev/null and b/qr-code.png differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..0d5ad80 --- /dev/null +++ b/script.js @@ -0,0 +1,23 @@ +const wrapper = document.querySelector(".wrapper"), +qrInput = wrapper.querySelector(".form input"), +generateBtn = wrapper.querySelector(".form button"), +qrImg = wrapper.querySelector(".qr-code img"); + +generateBtn.addEventListener("click", () => { + 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