In this simple JavaScript guide, we will be creating an application that generates “Quick Response” Codes. QR codes are a type of barcode, or scannable pattern, that contain various forms of data, like website links, account information, phone numbers, or even coupons. You can find QR codes in brochures, flyers, posters, billboards, items and products, business cards, and even online websites such as social media and shopping sites. Each QR code consists of black squares and dots which represent different pieces of information. When scanned, the unique pattern on the barcode translates into human-readable data. This transaction happens in seconds.
Let's Get Started
To get started with this project, we will need to use an external JavaScript library called QRCode.js and lucky for us, there is a CDN already available for this library, so we don't need to download it.
Create an HTML Page
This is just a basic HTML page without any JavaScript added to it. You are free to design it however you like.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QRCode Example</title>
</head>
<body>
</body>
</html>
Add a Container for the QR Code
The QR code will need a container so that it can be displayed. We are going to use a DIV container for this with the ID set to qrcode as highlighted in line #10.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QRCode Example</title>
</head>
<body>
<div id="qrcode"></div>
</body>
</html>
Add the QRCode.js Library
Now that we have our basic HTML completed, it is now time to finish up our project by adding the remaining JavaScript code underneath our DIV container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QRCode Example</title>
</head>
<body>
<div id="qrcode"></div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script type="text/javascript">
var qrcode = new QRCode("qrcode", {
text: "https://jmoorewv.com",
width: 300,
height: 300,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</body>
</html>
Our Final Project
That is all there is to add to generate QR Codes with JavaScript. As I mentioned, it is very simple and you can use this as a base to create more advanced projects. Be sure to check out the documentation for the QRCode.js library to see what other options are available to use within your code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QRCode Example</title>
</head>
<body>
<div id="qrcode"></div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script type="text/javascript">
var qrcode = new QRCode("qrcode", {
text: "https://jmoorewv.com",
width: 300,
height: 300,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</body>
</html>
Example Output:
