├── README.md
├── assets
├── images
│ ├── favicon.png
│ └── loading.gif
└── js
│ └── app.js
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | # QR Code Generator App using JavaScript
2 |
3 | ### Project Description
4 |
5 | This QR code generator app allows users to generate QR codes for various purposes.
6 | It provides a simple and user-friendly interface for generating QR codes with customizable data, size, and error correction level.
7 |
8 | ### Features
9 |
10 | 1. Enter the desired data (e.g., URL, text, contact information) in the input field.
11 | 2. Click on the "Generator QR Code" button to generate the QR code.
12 | 3. The generated QR code will be displayed on the screen.
13 |
14 | ### Note
15 |
16 | > This app requires an active internet connection to generate QR codes.
17 |
18 | ### Dependencies:
19 |
20 | - HTML:5
21 | - CSS
22 | - Tailwind CSS
23 | - goqr library: This library is used to generate QR codes.
24 |
25 | ### Project Preview
26 |
27 | [QR Code Generator App](https://md-rejoyan-islam.github.io/QR-code-generator-using-javascript)
28 |
--------------------------------------------------------------------------------
/assets/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/md-rejoyan-islam/QR-code-generator-using-javascript/309221625d44da877c47a486107039aa32df08a8/assets/images/favicon.png
--------------------------------------------------------------------------------
/assets/images/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/md-rejoyan-islam/QR-code-generator-using-javascript/309221625d44da877c47a486107039aa32df08a8/assets/images/loading.gif
--------------------------------------------------------------------------------
/assets/js/app.js:
--------------------------------------------------------------------------------
1 | const url = document.getElementById("url");
2 | const btn = document.getElementById("btn");
3 | let QRCodeDiv = document.getElementById("qrcode");
4 | const loading = document.getElementById("loading");
5 |
6 | btn.onclick = () => {
7 | QRCodeDiv.innerHTML = "";
8 | QRCodeDiv.classList.remove("p-8", "rounded-md", "border");
9 |
10 | // check input value is false or true
11 | if (!url.value) {
12 | return false;
13 | }
14 |
15 | const img = document.createElement("img");
16 | img.classList.add("mx-auto");
17 |
18 | // show loading
19 | loading.classList.remove("hidden");
20 |
21 | /***
22 | * Use API
23 | * website: https://goqr.me/api/
24 | * Free API
25 | */
26 | img.src = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${url.value}`;
27 |
28 | // when image is loaded hide loading
29 | img.onload = () => {
30 | // hide loading
31 | loading.classList.add("hidden");
32 |
33 | // add padding and border to div
34 | QRCodeDiv.classList.add("p-8", "rounded-md", "border");
35 |
36 | // append image to div
37 | QRCodeDiv.appendChild(img);
38 | };
39 | };
40 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
13 |
17 |
18 |
19 |
20 |
21 |
22 |
26 |
27 |
28 |
29 |
30 |
35 |
36 |
37 | QR Code Generator
38 |
39 |
42 |
43 |
44 |
45 | QR Code Generator
46 |
47 |
48 | Paste a url or enter text to create QR code
49 |
50 |
51 |
57 |
63 |
64 |
65 |
66 |
67 |
68 |
73 |
74 |
75 |
76 |