How to Generate QR code in Javascript
In this tutorial, you will learn how to generate QR code in javascript. QR code stands for Quick Response Code. It was invented in 1994 by Denso Wave, a Japanese automotive company.
It consists of black and white pixel patterns and is a two-dimensional version of the barcode. In the modern world, QR code is widely popular in comparison to the barcode.
There are a lot of advantages of using QR code over the barcode and one of them is data storage capability. A barcode can store up to 25 characters whereas a QR code can store up to 2500 characters.
I will not go further into the details of the QR code since that is completely out of the scope of this tutorial. Generating a QR code from scratch is not that easy and that is why we are going to use the QRCode.js library. This library is super simple and easy to use. Please do visit the official website to learn more about it.
In the following example, we are going to enter some random text in the input field. Upon click of a button, we will generate a QR code for that text and display it on the screen. Please have a look over the code example and the steps given below.
HTML & CSS
- We have 3 elements in the HTML file (
div
,button
, andinput
). Thediv
element with a class ofcontainer
is just a wrapper for the rest of the elements. - The
innerText
for thebutton
element is“Generate”
. - We have done some basic styling using CSS and added the link to our
style.css
stylesheet inside thehead
element. - We have downloaded the
QRCode.js
library from the official website and included it in the HTML file using thescript
tag. - We have also included our javascript file
script.js
with ascript
tag at the bottom.
<!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"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="container"> <input type="text" placeholder="Enter Text"> <button>Generate</button> <div id="qrcode"></div> </div> <script src="qrcode.js"></script> <script src="script.js"></script> </body> </html>
.container { display: flex; flex-direction: column; justify-content: space-between; margin: auto; height: 320px; width: 250px; } #qrcode { border: 1px solid black; height: 250px; }
Javascript
- We have selected the
input
element andbutton
element using thedocument.querySelector()
method and stored them in theinput
andbutton
variables respectively. - We are using the
QRCode()
constructor to create aQRCode
object. This constructor takes 2 parameters. The first parameter could be an element or id of the element where you would like to display the QR code. The second parameter could be a text or an object with a bunch of options where you can specify the size, color, correction level, etc. of the QR code. - We are storing our
QRCode
object in theqrcode
variable. - We have attached the
click
event listener to thebutton
element. - The
QRCode
object contains themakeCode()
method and this method takes a string as a parameter. We are simply passing the value of the input element to this method. As soon as it is done with processing, the QR code for that string will be displayed on the screen.
let input = document.querySelector('input'); let button = document.querySelector('button'); let qrcode = new QRCode(document.querySelector('#qrcode'), { width: 250, height: 250, colorDark : "#000000", colorLight : "#ffffff", correctLevel : QRCode.CorrectLevel.H }); button.addEventListener('click', () => { let inputValue = input.value; qrcode.makeCode(inputValue); })