How To Create QR Code Generator using HTML, CSS, and JavaScript only? QR codes have become ubiquitous in our digital world, and it’s no surprise why. They offer a quick and efficient way to share information, promotions, and links. In this article, we’ll take you through a step-by-step guide on how to create your own QR code generator using JavaScript, HTML, and CSS.
By the end of this tutorial, you’ll have a fully functional QR code generator that allows your users to easily generate QR codes with just a few clicks. We’ll cover everything from the HTML and CSS structure to the JavaScript code that generates the QR codes. So let’s dive in and unlock the power of QR codes with this comprehensive guide.
Introduction
QR (Quick Response) codes are two-dimensional barcodes that can be read by smartphones and other mobile devices using a QR code reader app. They are commonly used to encode URLs, product information, contact details, and other data types.
This article will teach us how to create a QR code generator using JavaScript, HTML, and CSS. The generator will allow users to enter text and generate a QR code that can be downloaded as a PNG image.
Prerequisites
To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. You will also need a web browser and a text editor. If you don’t know anything about this then also don’t worry. You can follow this tutorial step by step and copy our code to make it work. So just continue.
A Step-by-Step Guide to Building a QR Code Generator with JavaScript, HTML, and CSS Only
Step 1: Set up the HTML file
We’ll start by creating a simple HTML file that will contain an input field for the user to enter text and a canvas element where the QR code will be rendered. We’ll also include a button for the user to generate the QR code and a download link for the user to download the QR code as an image file.
So create an HTML file and name it index.html for example and write the following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>QR Code Generator</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<h1>QR Code Generator</h1>
<div class="generator">
<input type="text" id="qr-text" placeholder="Enter text" />
<button id="generate-btn">Generate</button>
</div>
<div id="qr-code"></div>
<button id="download-btn" disabled>Download</button>
</main>
<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js "></script>
<script src="script.js "></script>
</body>
</html>This is an HTML document that contains a simple webpage to generate and download QR codes. Here’s a breakdown of the different parts of the code:
- <!DOCTYPE html>: This declares that the document is an HTML5 document.
- <html lang=”en”>: This specifies the language of the document, in this case, English.
- <head>: This contains metadata for the document, such as the document title, character set, and viewport settings.
- <title>QR Code Generator</title>: This sets the title of the document, which is displayed in the browser tab.
- <link rel=”stylesheet” href=”style.css” />: This links to an external CSS stylesheet file named “style.css” that contains styles for the webpage.
- <body>: This contains the content of the webpage that is visible to the user.
- <main>: This contains the main content of the webpage, such as the heading, generator input field, and the generated QR code.
- <h1>QR Code Generator</h1>: This is the main heading of the webpage, which is displayed at the top of the page.
- <div class=”generator”>: This contains the input field and generate button to generate the QR code.
- <input type=”text” id=”qr-text” placeholder=”Enter text” />: This is the input field for the text that will be encoded in the QR code.
- <button id=”generate-btn”>Generate</button>: This is the button that generates the QR code when clicked.
- <div id=”qr-code”></div>: This is the container where the generated QR code will be displayed.
- <button id=”download-btn” disabled>Download</button>: This is the button that downloads the generated QR code when clicked. It is initially disabled and only enabled when a QR code is generated.
- <script src=”https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js”></script>: This is a script tag that links to an external JavaScript library named “qrcode.min.js” which is used to generate the QR code.
- <script src=”script.js “></script>: This is a script tag that links to an external JavaScript file named “script.js” which contains the code to generate and download the QR code.
We’ve also linked to a CSS file called style.css that we’ll create in the next step.
Step 2: Add styles with CSS
Next, we’ll create a CSS file that will style the HTML elements. We’ll use Flexbox to center the elements and add some basic styles to the input field and button.
So create a CSS file and name it style.css for example, because we have linked this name in our HTML. Then write the following code inside the CSS file.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f9f9f9;
font-family: Arial, Helvetica, sans-serif;
}
main {
width: 80%;
margin: 0 auto;
padding: 50px;
}
h1 {
font-size: 36px;
margin-bottom: 30px;
text-align: center;
}
.generator {
display: flex;
align-items: center;
margin-bottom: 20px;
}
input[type="text"] {
flex: 1;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
margin-right: 10px;
box-shadow: 0px 0px 5px #ddd;
}
button {
padding: 10px 20px;
border: none;
background-color: #4caf50;
color: #fff;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
#qr-code {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
#download-btn {
padding: 10px 20px;
border: none;
background-color: #008CBA;
color: #fff;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
#download-btn:hover {
background-color: #006d80;
}
#download-btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
}The CSS code includes the following styles:
The first block of code applies some global styles to all HTML elements. It sets the margin and padding to 0, and sets the box-sizing to border-box. This ensures that all elements have a consistent layout, regardless of their content or padding.
The body element is given a light gray background color and a default font of Arial, Helvetica, or sans-serif.
The main element has a width of 80% of its parent container, centered using margin: 0 auto. It also has a padding of 50px to add some spacing around the content.
The h1 element has a large font size of 36px, with a margin-bottom of 30px and it is aligned to the center.
The .generator class styles the container of the input field and the generate button. It displays them as a flexbox and centers the items. The input field is given a flex of 1, so it takes up all the remaining space. It has some padding, no border, and a border radius of 5px. It also has a box-shadow of 0px 0px 5px #ddd to give it a subtle shadow.
The button element has a green background color, white text color, and a padding of 10px 20px. It has no border, a font size of 16px, and a border radius of 5px. The cursor property is set to a pointer to indicate that it is clickable. On hover, it has a darker green background color.
The #qr-code element centers the generated QR code by displaying it as a flexbox and centering its contents. It also adds some margin bottom of 20px.
The #download-btn element is the button for downloading the generated QR code. It has a blue background color, white text color, and the same padding, border, and font size as the other button. The cursor property is set to a pointer to indicate that it is clickable. On hover, it has a darker blue background color.
Finally, the #download-btn[disabled] selector targets the download button when it is disabled. It sets the opacity to 0.5 and the cursor to not-allowed to indicate that it cannot be clicked.
Step 3: Write the JavaScript code
Now, we’ll create a JavaScript file that will generate the QR code based on the user’s input. We’ll use a third-party library called qrcode.js to generate the QR code. You can download the library from here or we would recommend you use CDN as in the HTML. You can replace the <script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script> with your local script if you are downloading. Make sure you load the qrcode.js file first before parsing the below code or just follow the code.
const qrText = document.getElementById("qr-text");
const generateBtn = document.getElementById("generate-btn");
const qrCodeDiv = document.getElementById("qr-code");
const downloadBtn = document.getElementById("download-btn");
// Create a new QR code object when the button is clicked
generateBtn.addEventListener("click", () => {
// Remove any existing QR code from the div
qrCodeDiv.innerHTML = "";
// Generate a new QR code with the text from the input field
const qrCode = new QRCode(qrCodeDiv, {
text: qrText.value,
width: 256,
height: 256,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H,
});
// Re-enable the download button
downloadBtn.disabled = false;
// Add event listener to the download button
downloadBtn.addEventListener("click", () => {
// Get the canvas element from the QR code object
const canvas = qrCode._el.firstChild;
// Create a temporary link element to trigger the download
const downloadLink = document.createElement("a");
downloadLink.download = "qrcode.png";
downloadLink.href = canvas.toDataURL("image/png");
// Add the link to the document and trigger the click event
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
});
});The JavaScript code does the following:
This code uses JavaScript to generate a QR code when a user enters text and clicks the “Generate” button. It starts by selecting several elements from the HTML document using document.getElementById(). These elements are the input field for the text, the button to generate the QR code, the div where the QR code will be displayed, and the download button.
When the “Generate” button is clicked, an event listener is triggered that first removes any existing QR code from the display div. Then, a new QR code is generated using the QRCode() constructor from the qrcode.min.js library. The constructor takes several options as arguments, including the text to encode, the size of the resulting QR code, the colors to use, and the error correction level.
Once the QR code has been generated, the download button is re-enabled and given an event listener. When the user clicks the download button, another event listener is triggered that retrieves the QR code as a canvas element and creates a temporary link element. This link element is added to the document, its href attribute is set to the QR code image URL, and its click() method is called to trigger the download. Finally, the temporary link element is removed from the document.
Step 4: Testing the QR Code Generator
Now that we’ve completed the HTML, CSS, and JavaScript code, we can test the QR code generator by opening the HTML file in a web browser.
- Enter some text in the input field.
- Click the generate button.
- The QR code should be displayed in the canvas element, and the download link should be visible.
- Click the download link to download the QR code as a PNG image.
Download The Code
Here’s the ZIP file link to download the code files. By downloading, you agree to use them for good purposes only! (Removed. Will be available soon!)
Try Our QR Code Generator
You can try our Free QR Code Generator.
Final Words
In this tutorial, we learned how to create a QR code generator using JavaScript, HTML, and CSS. We used the qrcode.js library to generate the QR code and added a download link for the user to download the QR code as an image file. This simple project can be extended further by adding more features such as allowing the user to customize the QR code’s color and size or by generating multiple QR codes at once.
Learn how to make a customizable QR Code Generator for a Free & Easy Step-by-Step Guide. Please share your feedback in the comment section and don’t forget to share this post with others. This will motivate us to write more content like this.
Hello,
what if we only want to accept URL as qr code data.
Hey! You can just add a condition before sending the data. Add a condition using to check whether it’s a valid URL or not. If it is then proceed. Otherwise just show an error message e.g. Enter a URL only.
Do you need the code?
Nice good information. Thanks