100-project-100-days-website/100_projects/55-qr-code-generator/app.js
2023-04-17 01:33:23 +03:00
Ask

24 lines
843 B
JavaScript

{ff0c4d8c9ebca9b77745b4c970b701aa264c10da true 843 app.js 0xc0030ccd20}

const main = document.querySelector(".main"),
qrInput = main.querySelector(".form input"),
generateBtn = main.querySelector(".form button"),
qrImg = main.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", () => {
main.classList.add("active");
generateBtn.innerText = "Generate QR Code";
});
});
qrInput.addEventListener("keyup", () => {
if(!qrInput.value.trim()) {
main.classList.remove("active");
preValue = "";
}
});
// https://goqr.me/api/