QR code Generator

![](https://images.ecency.com/DQmbxsBY6BbpJeu5QcX37Y9a7rGcfPsgFHMZQXDtorJqJef/qrpos_3.png) Hello people, I woke up great. And among so many things I am working on, I just feel like creating a simple javascript app. Then QR code generator pinged my mind, and I decided to create one with Html, CSS and Javascript using the qrcode cdn. Without further ado, let's play. ``` QR code Generator

``` CSS ``` * { padding: 0; margin: 0; box-sizing: border-box; font-family: "poppins"; } body { height: 100vh; background: linear-gradient(#f3f3fb 50%, #2ba387 50%); } .body_wrapper { background-color: #f3f3fb; padding: 5em 4em; position: absolute; width: 31.25em; transform: translate(-50%, -50%); top: 50%; left: 50%; border-radius: 0.6em; box-shadow: 0 1.5em 3em rgba(3, 21, 55, 0.3); } #inputData { width: 100%; border: none; border-bottom: 2px solid #000; padding: 0.5em 1em; font-size: 1em; outline: none; } .options { display: flex; margin-top: 1em; align-items: center; justify-content: space-around; } select { appearance: none; width: 8em; padding: 0.45em 0.9em; font-size: 1.25em; letter-spacing: 0.2em; cursor: pointer; background-color: #2ba387; border: none; color: #000; background-image: url(); background-repeat: no-repeat; background-size: 1.1em; background-position: 6em; outline: none; } select::-ms-expand { display: none; } select option { background-color: #f3f3fb; color: #2ba387; letter-spacing: 0.01em; font-weight: 300; font-size: 1.0em; } .selected { display: none; } .sel_color { background-color: transparent; width: 3.1em; height: 3.4em; outline: none; border: none; } .sel_color::-webkit-color-swatch { border-radius: 0.3em; border: 0.18em solid #191f3f; } .sel_color::-moz-color-swatch { border-radius: 0.3em; border: 0.18em solid #191f3f; } .boxx { display: flex; align-items: center; justify-content: space-around; } .boxx button { font-size: 1em; padding: 0.8em 2em; border-radius: 0.5em; margin-top: 2em; background-color: transparent; color: #2ba387; border: 0.18em solid #2ba387; } .boxx button:disabled { background-color: transparent; color: #f3f3fb; border: 0.18em solid #c6c0c0; } .container { display: flex; justify-content: center; margin-top: 0.18em; } .keep { display: none; } ``` JAVASCRIPT ``` let container = document.querySelector(".container"); const inputData = document.querySelector("#inputData"); const submitButton = document.querySelector("#submit"); const selectOpt = document.querySelector(".selOption"); const bgColor = document.querySelector("#Bgcolor"); const qColor = document.querySelector("#Qcolor"); let QR_Code; let qrSize, bgColorChoice, qColorChoice; // Set size selectOpt.addEventListener("change", () => { qrSize = selectOpt.value; }); // Set BG color bgColor.addEventListener("input", () =>{ bgColorChoice = bgColor.value; }); //Set QR color qColor.addEventListener("input", () =>{ qColorChoice = qColor.value; }); // Format input const inputFormat = (value)=> { value = value.replace(/[^a-z0-9A-Z]+/g,""); return value; }; submitButton.addEventListener("click", async () => { container.innerHTML = " "; //QR Generator QR_Code = await new QRCode(container, { text: inputData.value, width: qrSize, height: qrSize, colorDark: qColorChoice, colorLight: bgColorChoice, }); }); inputData.addEventListener("input", () => { if (inputData.value.trim().length < 1) { submitButton.disabled = true; } else { submitButton.disabled = false; } }); window.onload = () => { container.innerHTML = " "; qrSize = 100; selectOpt.value = 100; inputData.value = " "; bgColor.value = bgColorChoice = "#ffffff"; qColor.value = qColorChoice = "#377dff"; submitButton.disabled = true; } ``` You can copy, play with the code and test on your device. THE RESULT https://youtu.be/GMkR3iR1GIM _{I am @tykee, I do dev things and write}

RE: Shadow Hunters Contest Round - 165