How to Create a QR Code Generator in JavaScript
Today we are learning How to Create a QR Code Generator in JavaScript, It’s a simple and helpful project for everyone who wants to improve their skills in HTML, CSS, and JavaScript. QR (Quick Response) codes have become increasingly popular due to their ability to store and transmit information in a compact and efficient manner.
Creating a QR code generator using JavaScript can be a fun and educational project that allows you to generate QR codes for various purposes, such as sharing links, contact information, or product details.
In this article, we will walk you through the process of How to Create a QR Code Generator in JavaScript, without any complex code making it accessible to everyone.
Before diving into the technical aspects, let’s briefly understand what QR codes are. QR codes are two-dimensional barcodes that can store different data types, such as URLs, text, phone numbers, and more. The stored information is instantly decoded and displayed when scanned with a QR code reader or smartphone camera.
How to Create QR Code Generator in JavaScript
To start creating our QR code generator, you will need a basic understanding of HTML, CSS, and JavaScript. First, create a new HTML file and add the necessary elements such as an input field, a button, and a canvas element where we will render the generated QR code.
There are various JavaScript libraries available that can help us generate QR codes effortlessly. For simplicity and ease of use, we will use “qrcode.js,” a popular and lightweight library. You can include this library in your project by downloading the script file or linking it through a Content Delivery Network (CDN).
Create an input field where users can enter the data they want to encode into the QR code. Add a button that will trigger the code generation process when clicked.
<div class="container">
<div class="wrapper">
<h2>Qr Code Generator</h2>
<p>Enter URL or Text to generator QR Code</p>
<p class="msg"></p>
<input
type="text"
class="form-control"
placeholder="Enter URL or Text!"
id="input-value"
/>
<div class="sizes">
<p>Select Size</p>
<select id="size">
<option value="100">100x100</option>
<option value="200">200x200</option>
<option value="300">300x300</option>
<option value="400">400x400</option>
<option value="500">500x500</option>
<option value="600">600x600</option>
<option value="700">700x700</option>
</select>
</div>
<!-- output of qr code -->
<div id="qrCodeScreen"></div>
<div class="btns">
<button type="submit" class="btn-generator">Generate QR Code</button>
<a href="" class="btn-save" download="qr_code.png"> Save </a>
</div>
</div>
</div>
To improve the user experience, add some basic CSS styles to the input field, button, and canvas element. This step is optional but recommended to make the QR code generator visually appealing.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Ruda:wght@400;600;700&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "poppins", sans-serif;
display: flex;
align-items: center;
justify-content: center;
background: rgb(2, 0, 36);
background: rgb(63, 94, 251);
background: radial-gradient(
circle,
rgba(63, 94, 251, 1) 0%,
rgba(252, 70, 107, 1) 100%
);
min-height: 100vh;
}
.container {
background: #fff;
border-radius: 5px;
font-family: "Poppins", sans-serif;
/* max-width: 450px;
width: 100%; */
}
.wrapper {
padding: 2rem;
box-shadow: 5px 0 5px rgb(0, 0, 0, 0.5);
}
.wrapper h2 {
font-size: 1.5rem;
position: relative;
margin-bottom: 1rem;
}
.wrapper h2::after {
content: "";
position: absolute;
top: 100%;
left: 0;
height: 0.22rem;
width: 40%;
/* height: 100%; */
background: #1e2ee6;
}
.wrapper input {
width: 100%;
padding: 0.8rem 1rem;
margin-top: 1rem;
border: none;
outline: none;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
}
.sizes {
display: flex;
justify-content: space-between;
align-items: center;
margin: 1rem 0rem;
outline: none;
}
.sizes select {
border: 1px solid #ddd;
width: 50%;
padding: 0.5rem 0.5rem;
font-family: "poppins", sans-serif;
}
.btns {
display: flex;
justify-content: space-between;
align-items: center;
margin: 1rem 0;
}
.wrapper button,
.btn-save {
margin: 0.5rem 0;
outline: none;
background: #1e2ee6;
color: #fff;
padding: 0.8rem 0.5rem;
border: none;
font-size: 0.9rem;
font-family: "poppins", sans-serif;
border-radius: 5px;
cursor: pointer;
opacity: 0.8;
transition: all 0.3s ease-in-out;
display: inline-block;
text-decoration: none;
}
.wrapper button:hover {
opacity: 1;
}
.msg {
text-align: center;
}
#qrCodeScreen {
border: 1px solid #ddd;
padding: 1rem;
display: none;
}
#qrCodeScreen img {
object-fit: cover;
display: inline-block;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
}
Now that the basic functionality is in place, thoroughly test the QR code generator with various inputs to ensure it works as expected. Debug any issues that may arise during testing.
const inputEl = document.getElementById("input-value");
const sizesEl = document.getElementById("size");
const qrOutEl = document.getElementById("qrCodeScreen");
const button = document.querySelector(".btn-generator");
const downloadBtn = document.querySelector(".btn-save");
const ErrorEl = document.querySelector(".msg");
let Url;
let size;
// generator qr code function
const generateQrCode = function (e) {
e.preventDefault();
Url = document.getElementById("input-value").value;
size = document.getElementById("size").value;
if (Url === "") {
ErrorEl.innerHTML = "Please Enter URL!";
} else {
QrCodeDisplay(Url, size);
qrOutEl.style.display = "block";
ErrorEl.innerHTML = "";
}
};
// Generate QR code
const QrCodeDisplay = function (url, size) {
qrOutEl.innerHTML = "";
new QRCode("qrCodeScreen", {
text: url,
width: size,
height: size,
});
};
// Create save button to download QR code as image
downloadBtn.addEventListener("click", () => {
let img = document.querySelector("#qrCodeScreen img");
if (img !== null) {
let imgAtrr = img.getAttribute("src");
downloadBtn.setAttribute("href", imgAtrr);
} else {
downloadBtn.setAttribute(
"href",
`${document.querySelector("canvas").toDataURL()}`,
);
}
});
// generate event
button.addEventListener("click", generateQrCode);
Once you are satisfied with the functionality and performance of your QR code generator, you can deploy it on a web server or share it with others.
Qr Code Generator Using HTML CSS and JavaScript
I’ve made a tutorial for you that you will learn step by step how to design the QR Code Page, and then we will learn how to use JavaScript to display the QR code.
You May Also Like:
Also has great features such as downloading the Qr Code Image inside your PC, finally you can increase and decrease the size of the Qr Code.
Hope you’ve learned all about how to create a QR code generator in javascript from scratch practically. After watching the complete tutorial you will able to do that as well.
Conclusion:
Congratulations! You have successfully created a QR code generator in JavaScript from scratch. This project not only allows you to generate QR codes but also serves as a valuable learning experience for understanding JavaScript, HTML, and CSS integration.
Remember, the QR code generator we built here is just a starting point. You can further enhance its capabilities by adding features like error handling, allowing users to choose the QR code size, and integrating it with server-side technologies to save generated QR codes.
QR codes continue to be an essential tool for sharing information quickly and efficiently. By mastering the creation of QR code generators, you have opened the door to countless creative possibilities in the digital world. Have fun experimenting with your QR code generator, and keep exploring new ways to apply this technology to real-world scenarios. Happy coding!