diff --git a/100_projects/55-qr-code-generator/app.js b/100_projects/55-qr-code-generator/app.js new file mode 100644 index 0000000..ff0c4d8 --- /dev/null +++ b/100_projects/55-qr-code-generator/app.js @@ -0,0 +1,24 @@ +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/ \ No newline at end of file diff --git a/100_projects/55-qr-code-generator/index.html b/100_projects/55-qr-code-generator/index.html new file mode 100644 index 0000000..21d8cfb --- /dev/null +++ b/100_projects/55-qr-code-generator/index.html @@ -0,0 +1,26 @@ + + + + + + + Document + + + +
+
+

QR Code Generator

+

Paste a url or enter text to create QR Code

+
+
+ + +
+
+ qr-code +
+
+ + + \ No newline at end of file diff --git a/100_projects/55-qr-code-generator/style.css b/100_projects/55-qr-code-generator/style.css new file mode 100644 index 0000000..2994de9 --- /dev/null +++ b/100_projects/55-qr-code-generator/style.css @@ -0,0 +1,108 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + background: #BDB76B; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} +::selection{ + color: #fff; + background: #BDB76B; +} +.main{ + height: 265px; + width: 320px; + 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); + text-align: center; +} +.main.active{ + height: 530px; +} +header h1{ + font-size: 21px; + font-weight: 500; +} +header p{ + margin-top: 5px; + color: #575757; + font-size: 16px; +} +.main .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: #BDB76B; + transition: .3s; +} +.form button:hover{ + box-shadow: 2px 2px 5px #BDB76B; +} +.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; +} +.main.active .qr-code{ + opacity: 1; + pointer-events: auto; + transition: opacity 0.5s 0.05s ease; +} +.qr-code img{ + width: 170px; +} + +@media (max-width: 430px){ + .main{ + height: 255px; + padding: 16px 20px; + } + .main.active{ + height: 510px; + } + header p{ + color: #696969; + } + .form :where(input, button){ + height: 52px; + } + .qr-code img{ + width: 160px; + } +} \ No newline at end of file