├── README.md ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Qr-code -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Qr code Generator 7 | 8 | 9 | 10 |
11 |
12 |

QR Code Generator

13 |

Paste a url or enter text to create QR Code

14 |
15 |
16 | 17 | 18 |
19 |
20 | qr-code 21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const wrapper = document.querySelector(".wrapper"), 2 | qrInput = wrapper.querySelector(".form input"), 3 | generateBtn = wrapper.querySelector(".form button"), 4 | qrImg = wrapper.querySelector(".qr-code img"); 5 | let preValue; 6 | 7 | generateBtn.addEventListener("click", () => { 8 | let qrValue = qrInput.value.trim(); 9 | if (!qrValue || preValue == qrValue) return; 10 | preValue = qrValue; 11 | generateBtn.innerText = "Generating QR Code....."; 12 | qrImg.src = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrValue}'; 13 | qrImg.addEventListener("load",() => { 14 | wrapper.classList.add("active"); 15 | generateBtn.innerText = "Generate QR Code"; 16 | }) 17 | }) 18 | 19 | qrInput.addEventListener("keyup",() => { 20 | if(!qrInput.value.trim()) { 21 | wrapper.classList.remove("active"); 22 | preValue = ""; 23 | } 24 | }); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * 2 | { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: "Poppins"; 7 | } 8 | 9 | body 10 | { 11 | display: flex; 12 | padding: 0 10px; 13 | min-height: 100vh; 14 | align-items: center; 15 | background: #a17965; 16 | justify-content: center; 17 | color: #fff; 18 | } 19 | .wrapper 20 | { 21 | height: 265px; 22 | max-width: 410px; 23 | background: #222; 24 | border-radius: 7px; 25 | padding: 20px 25px 0; 26 | transition: height 0.2s ease; 27 | } 28 | .wrapper.active 29 | { 30 | height: 530px; 31 | } 32 | header h1{ 33 | font-size: 21px; 34 | font-weight: 500; 35 | color: #fff; 36 | } 37 | header p{ 38 | margin-top: 5px; 39 | color: #aaa; 40 | font-size: 16px; 41 | } 42 | .wrapper .form{ 43 | margin: 20px 0 25px; 44 | } 45 | 46 | .form :where(input,button){ 47 | width: 100%; 48 | height: 55px; 49 | border: none; 50 | outline: none; 51 | border-radius: 5px; 52 | transition: 0.1s ease; 53 | } 54 | .form input{ 55 | font-size: 18px; 56 | padding: 0 17px; 57 | border: 1px solid #999; 58 | color: #fff; 59 | background: #333; 60 | } 61 | .form input:focus 62 | { 63 | box-shadow: 0 3px 6px rgba(0,0,0,0.13); 64 | } 65 | .form input::placeholder 66 | { 67 | color: #999; 68 | } 69 | .form button 70 | { 71 | color: #fff; 72 | cursor: pointer; 73 | margin-top: 20px; 74 | font-size: 17px; 75 | background: #444; 76 | } 77 | .form button:hover 78 | { 79 | background: #333; 80 | } 81 | .form button:active 82 | { 83 | transform: scale(0.95); 84 | } 85 | .qr-code 86 | { 87 | opacity: 0; 88 | display: flex; 89 | padding: 33px 0; 90 | border-radius: 5px; 91 | align-items: center; 92 | pointer-events: none; 93 | justify-content: center; 94 | border: 1px solid #ccc; 95 | } 96 | .wrapper.active .qr-code 97 | { 98 | opacity: 1; 99 | pointer-events: auto; 100 | transition: opacity 0.5s 0.05s ease; 101 | } 102 | .qr-code img{ 103 | width: 170px; 104 | } 105 | @media (max-width: 430px) { 106 | .wrapper { 107 | height: 255px; 108 | padding: 16px 20px; 109 | } 110 | .wrapper.active{ 111 | height: 510px; 112 | } 113 | header p{ 114 | color: #696969; 115 | } 116 | .form :where(input,button) { 117 | height: 52px; 118 | } 119 | .qr-code img { 120 | width: 160px; 121 | } 122 | 123 | } --------------------------------------------------------------------------------