├── README.md ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # qr-code-generator-v1 2 | This is a mini generator for creating a QR Code by writing a text or links. 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | QR Code Generator v1 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 |

Designed by @risnugr

24 |
25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /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 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); 2 | @import url("https://fonts.googleapis.com/css2?family=Timmana&display=swap"); 3 | 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | font-family: "Poppins", sans-serif; 9 | } 10 | body { 11 | display: flex; 12 | margin: 0; 13 | padding: 0; 14 | font-family: Arial, sans-serif; 15 | background: #333; 16 | color: #fff; 17 | font-size: 1.1em; 18 | line-height: 1.5; 19 | align-items: center; 20 | text-align: center; 21 | background-image: linear-gradient(-45deg, #f06, #9f6); 22 | background-size: 400% 400%; 23 | animation: gradient 1s linear infinite; 24 | } 25 | 26 | @keyframes gradient { 27 | 0% { 28 | background-position: 0% 50%; 29 | } 30 | 50% { 31 | background-position: 100% 50%; 32 | } 33 | 100% { 34 | background-position: 0% 50%; 35 | } 36 | } 37 | 38 | .wrapper { 39 | max-width: 500px; 40 | margin: 0 auto; 41 | padding: 20px; 42 | border-radius: 5px; 43 | background: rgba(0, 0, 0, 0.8); 44 | box-shadow: 0 0 25px #000; 45 | } 46 | 47 | .wrapper.active { 48 | height: 530px; 49 | } 50 | 51 | header h1 { 52 | font-size: 21px; 53 | font-weight: 500; 54 | color: #fff; 55 | text-align: center; 56 | } 57 | 58 | header p { 59 | margin-top: 5px; 60 | color: #aaa; 61 | font-size: 16px; 62 | text-align: center; 63 | } 64 | 65 | .wrapper .form { 66 | margin: 20px 0 25px; 67 | } 68 | 69 | .form :where(input, button) { 70 | width: 100%; 71 | height: 55px; 72 | border: none; 73 | outline: none; 74 | border-radius: 5px; 75 | transition: 0.1s ease; 76 | } 77 | 78 | .form input { 79 | font-size: 18px; 80 | padding: 0 17px; 81 | border: 1px solid #999; 82 | color: #fff; 83 | background: #333; 84 | } 85 | 86 | .form input:focus { 87 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.13); 88 | } 89 | 90 | .form input::placeholder { 91 | color: #999; 92 | } 93 | 94 | .form button { 95 | color: #fff; 96 | cursor: pointer; 97 | margin-top: 20px; 98 | font-size: 17px; 99 | background: #444; 100 | transition: background 0.3s ease, transform 0.2s ease; 101 | } 102 | 103 | .form button:hover { 104 | background: #333; 105 | } 106 | 107 | .form button:active { 108 | transform: scale(0.95); 109 | } 110 | 111 | .qr-code { 112 | opacity: 0; 113 | display: flex; 114 | padding: 33px 0; 115 | border-radius: 5px; 116 | align-items: center; 117 | pointer-events: none; 118 | justify-content: center; 119 | border: 1px solid #ccc; 120 | } 121 | 122 | .wrapper.active .qr-code { 123 | opacity: 1; 124 | pointer-events: auto; 125 | transition: opacity 0.5s 0.05s ease; 126 | } 127 | 128 | .qr-code img { 129 | width: 170px; 130 | } 131 | 132 | @media (max-width: 430px) { 133 | .wrapper { 134 | height: 255px; 135 | padding: 16px 20px; 136 | } 137 | .wrapper.active { 138 | height: 510px; 139 | } 140 | header p { 141 | color: #696969; 142 | } 143 | .form :where(input, button) { 144 | height: 52px; 145 | } 146 | .qr-code img { 147 | width: 160px; 148 | } 149 | } 150 | .wrapper .footer p { 151 | color: #aed8cc; 152 | text-align: center; 153 | font-family: "Timmana", sans-serif; 154 | margin-top: 7px; 155 | } 156 | .wrapper .footer p .ig { 157 | color: #45ffca; 158 | text-align: center; 159 | font-family: "Timmana", sans-serif; 160 | } 161 | --------------------------------------------------------------------------------