https://github.com/pskinnertech/qrcode-vanilla
Create a Static QR Code Generator using Vanilla JavaScript, HTML, and Tailwind CSS
https://github.com/pskinnertech/qrcode-vanilla
javascript qrcode-generator
Last synced: about 2 months ago
JSON representation
Create a Static QR Code Generator using Vanilla JavaScript, HTML, and Tailwind CSS
- Host: GitHub
- URL: https://github.com/pskinnertech/qrcode-vanilla
- Owner: PSkinnerTech
- Created: 2023-04-17T22:31:17.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-17T22:36:55.000Z (about 3 years ago)
- Last Synced: 2025-06-11T10:13:21.120Z (12 months ago)
- Topics: javascript, qrcode-generator
- Language: HTML
- Homepage: https://qrcode-vanilla.netlify.app/
- Size: 16.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Create a Static QR Code Generator using Vanilla JavaScript, HTML, and Tailwind CSS
## Creating a User-Friendly QR Code Generator: Building a Static Web Application with Vanilla JavaScript, HTML, and Tailwind CSS
In this tutorial, we will create a static QR Code Generator application using vanilla JavaScript, HTML, and Tailwind CSS. The application will allow users to enter a URL, generate a QR code, and download the QR code as an image.
## **Prerequisites**
Before starting this tutorial, you should have a basic understanding of:
- HTML
- CSS
- JavaScript
## **Setting up the project**
1. Create a new folder called `qr-code-generator`.
2. Inside the `qr-code-generator` folder, create the following files and folders:
```bash
codeqr-code-generator/
|-- img/
| |-- qrcode.svg
|-- js/
| |-- script.js
|-- index.html
```
## **Creating the HTML structure**
Open the `index.html` file and add the following code:
```xml
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ["Poppins", "sans-serif"],
},
},
},
};
#spinner {
display: none;
}
Free Online QR Code Generator
QR Code Generator
QR Code Generator
QR Codes allow smartphone users to access your website simply and
quickly.
Enter your URL below to generate a QR Code and download the image.
100x100
200x200
300x300
400x400
500x500
600x600
700x700
Generate QR Code
Loading...
```
## **Styling the application with Tailwind CSS**
We have already included the Tailwind CSS CDN in the `` section of our HTML file. We have also added a custom font, Poppins, from Google Fonts. The application should now be styled with Tailwind CSS.
## **Adding interactivity with JavaScript**
We have already added the script tag for qrcode.js library and included our custom `script.js` file with the `defer` attribute in the `` section. Open the `script.js` file and add the following code:
```javascript
const form = document.getElementById("generate-form");
const qr = document.getElementById("qrcode");
// Button submit
const onGenerateSubmit = (e) => {
e.preventDefault();
clearUI();
const url = document.getElementById("url").value;
const size = document.getElementById("size").value;
// Validate url
if (url === "") {
alert("Please enter a URL");
} else {
showSpinner();
// Show spinner for 1 sec
setTimeout(() => {
hideSpinner();
generateQRCode(url, size);
// Generate the save button after the qr code image src is ready
setTimeout(() => {
// Get save url
const saveUrl = qr.querySelector("img").src;
// Create save button
createSaveBtn(saveUrl);
}, 50);
}, 1000);
}
};
// Generate QR code
const generateQRCode = (url, size) => {
const qrcode = new QRCode("qrcode", {
text: url,
width: size,
height: size,
});
};
// Clear QR code and save button
const clearUI = () => {
qr.innerHTML = "";
const saveBtn = document.getElementById("save-link");
if (saveBtn) {
saveBtn.remove();
}
};
// Show spinner
const showSpinner = () => {
const spinner = document.getElementById("spinner");
spinner.style.display = "block";
};
// Hide spinner
const hideSpinner = () => {
const spinner = document.getElementById("spinner");
spinner.style.display = "none";
};
// Create save button to download QR code as image
const createSaveBtn = (saveUrl) => {
const link = document.createElement("a");
link.id = "save-link";
link.className =
"bg-green-500 hover:bg-black text-white font-bold py-2 rounded w-1/3 m-auto my-5";
link.href = saveUrl;
link.download = "qrcode";
link.innerHTML = "Save Image";
document.getElementById("generated").appendChild(link);
};
hideSpinner();
form.addEventListener("submit", onGenerateSubmit);
```
This code handles the following functionality:
- Form submission
- Generating the QR code
- Displaying and hiding the spinner
- Creating a save button to download the generated QR code
## Conclusion
In this tutorial, we have built a static QR Code Generator using vanilla JavaScript, HTML, and Tailwind CSS. We have implemented form submission, QR code generation, and the ability to download the QR code as an image. This application provides a simple and efficient way for users to generate QR codes for URLs.
You can now use this QR Code Generator to create QR codes for your website or any other URLs you want to share quickly and easily. The application is easy to customize and extend, so feel free to make any adjustments or add new features to suit your needs.
If you enjoyed this tutorial, be sure to follow me on [Twitter](https://twitter.com/PSkinnerTech) and subscribe to my blog!
Happy Building! (🧱 , 🚀 )