├── favicon.ico ├── img ├── qr-code.svg ├── screen.png └── spinner.svg ├── index.html ├── js └── script.js └── readme.md /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/qr-code-generator/1ffca058365c26d7a2c25fc05d289a2c98290767/favicon.ico -------------------------------------------------------------------------------- /img/qr-code.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 97 | -------------------------------------------------------------------------------- /img/screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/qr-code-generator/1ffca058365c26d7a2c25fc05d289a2c98290767/img/screen.png -------------------------------------------------------------------------------- /img/spinner.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/qr-code-generator/1ffca058365c26d7a2c25fc05d289a2c98290767/img/spinner.svg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 15 | 16 | 17 | 18 | 22 | 23 | 34 | 40 | 41 | 46 | Free Online QR Code Generator 47 | 48 | 49 |

50 |

51 |

QR Code Generator

52 |

53 |

54 |

55 |

56 |

59 |

60 |

QR Code Generator

61 |

62 | QR Codes allow smartphone users to access your website simply and 63 | quickly. 64 |

65 |

66 | Enter your URL below to generate a QR Code and download the image. 67 |

68 | 69 | 98 |

99 |

100 |

105 |

106 |

107 | 108 |

112 | 113 |

114 | 129 | 130 |

131 | 132 |

133 |

134 |

135 | 136 | 137 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | const form = document.getElementById("generate-form"); 2 | const qr = document.getElementById("qrcode"); 3 | 4 | // Button submit 5 | const onGenerateSubmit = (e) => { 6 | e.preventDefault(); 7 | 8 | clearUI(); 9 | 10 | const url = document.getElementById("url").value; 11 | const size = document.getElementById("size").value; 12 | 13 | // Validate url 14 | if (url === "") { 15 | alert("Please enter a URL"); 16 | } else { 17 | showSpinner(); 18 | // Show spinner for 1 sec 19 | setTimeout(() => { 20 | hideSpinner(); 21 | generateQRCode(url, size); 22 | showScanner(); 23 | // Generate the save button after the qr code image src is ready 24 | setTimeout(() => { 25 | // Get save url 26 | const saveUrl = qr.querySelector("canvas").toDataURL(); 27 | // Create save button 28 | createSaveBtn(saveUrl); 29 | }, 50); 30 | }, 1000); 31 | } 32 | }; 33 | 34 | // Generate QR code 35 | const generateQRCode = (url, size) => { 36 | const qrcode = new QRCode("qrcode", { 37 | text: url, 38 | width: size, 39 | height: size, 40 | }); 41 | }; 42 | 43 | // Clear QR code and save button 44 | const clearUI = () => { 45 | qr.innerHTML = ""; 46 | const saveBtn = document.getElementById("save-link"); 47 | if (saveBtn) { 48 | saveBtn.remove(); 49 | } 50 | }; 51 | 52 | // hide scanner 53 | const showScanner = () => { 54 | const scanner = document.getElementById("qrCodeContainer"); 55 | scanner.style.display = "block"; 56 | }; 57 | 58 | // Show spinner 59 | const showSpinner = () => { 60 | const spinner = document.getElementById("spinner"); 61 | spinner.style.display = "block"; 62 | }; 63 | 64 | // Hide spinner 65 | const hideSpinner = () => { 66 | const spinner = document.getElementById("spinner"); 67 | spinner.style.display = "none"; 68 | }; 69 | 70 | // Create save button to download QR code as image 71 | const createSaveBtn = (saveUrl) => { 72 | const link = document.createElement("a"); 73 | link.id = "save-link"; 74 | link.classList = 75 | 'bg-red-500 hover:bg-red-700 text-white font-bold py-2 rounded w-1/3 m-auto my-5'; 76 | link.innerHTML = "Save Image"; 77 | 78 | link.href = saveUrl; 79 | link.download = "qrcode.png"; 80 | 81 | document.getElementById("generated").appendChild(link); 82 | }; 83 | 84 | hideSpinner(); 85 | 86 | form.addEventListener("submit", onGenerateSubmit); 87 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # QR Code Generator 2 | 3 | Simple app to generate and download a QR code that can be used to share a link. 4 | 5 | [Live Demo](https://qrcodes.tech) 6 | 7 |

8 | 9 | ### MIT License 10 | 11 | Copyright © 2022 Brad Traversy 12 | 13 | Permission is hereby granted, free of charge, to any person obtaining a copy 14 | of this software and associated documentation files (the "Software"), to deal 15 | in the Software without restriction, including without limitation the rights 16 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 17 | copies of the Software, and to permit persons to whom the Software is 18 | furnished to do so, subject to the following conditions: 19 | 20 | The above copyright notice and this permission notice shall be included in all 21 | copies or substantial portions of the Software. 22 | 23 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 24 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 25 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 26 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 27 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 28 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 29 | SOFTWARE. 30 | --------------------------------------------------------------------------------