How To Develop A QR Code Generator and Scanner in JavaScript (Source Code)

Features

1. QR Code Generation:

Enable users to input text or content, which will be converted into QR codes.
Display the generated QR code prominently on the user interface.
Offer a downloadable link to save the generated QR code image.

2. QR Code Scanning:

Allow users to initiate QR code scanning using their device’s camera.
Display a live camera feed for scanning QR codes.
Detect and decode scanned QR codes, revealing their content.

How To Make QR Code Generator and Scanner.

On this project we will be creating three files, which are: index.html, Styles.css and app.js. After creating all these files we will be writing our HTML, CSS and JavaScript codes in them, respectively.

Make Money Online in Dollar$

Continue Content Below

Also See: 10 Steps on How To Make Cartoon Videos and Make Money Online

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QRCode Generator and Scanner</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>QR Code Generator and Scanner</h1>
        <div class="generator">
            <h2>Generate QR Code</h2>
            <input type="text" id="qrText" placeholder="Enter your text">
            <button id="generateBtn">Generate QR Code</button>
            <div id="qrcode"></div>
            <a href="#" download="qrcode.png" id="downloadBtn">Download QR Code</a>
        </div>
        <div class="scanner">
            <h2>Scan Your QR Code</h2>
            <button id="StartScanBtn">Start Scanning</button>
            <video id="qrVideo" autoplay playinline></video>
            <div id="scanResult"></div>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

HTML Code Explanation

This HTML code represents a web page that combines a QR code generator and a QR code scanner. It includes both the structure of the page and references to external resources. Let’s break down the code:

Document Type Declaration (<!DOCTYPE html>): This declaration specifies that the document is an HTML5 document.
<html> Element: The root element of the HTML document.
<head> Section: Contains metadata and external resource links required for the document. In this case:

<meta> tags specify the character set and viewport settings.
<title> sets the title of the web page, which will appear in the browser’s title bar or tab.
<link> references an external stylesheet named “styles.css” to apply styling to the document.

<body> Section: The main content of the web page resides within the body element. It is divided into two main sections: a. QR Code Generator Section (<div class="generator">):
- <h2> provides a subheading for the section.
- <input> element allows users to enter text that will be converted into a QR code.
- <button> with the ID generateBtn triggers the QR code generation process.
- <div> with the ID qrcode is where the generated QR code will be displayed.
- <a> with the ID downloadBtn provides a link to download the generated QR code image.
b. QR Code Scanner Section (<div class="scanner">):
- <h2> provides a subheading for the section.
- <button> with the ID startScanBtn initiates the QR code scanning process.
- <video> with the ID qrVideo is where the camera feed for scanning QR codes will be displayed.
- <div> with the ID scanResult is where the scanned QR code content will be shown.
External Scripts:

<script> tag referencing the QR code generation library from “https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js”.
<script> tag referencing an external JavaScript file named “app.js”, which is likely where the application logic is defined.

Overall, this HTML code sets up a web page with two main sections: a QR code generator section and a QR code scanner section. Users can enter text to generate QR codes, and they can initiate scanning using their device’s camera. The styling is applied using an external stylesheet, and the functionality is likely implemented in the linked “app.js” JavaScript file.

Also See: Build an Age Calculator With JavaScript, HTML and CSS in 3 Steps (Source Code)

CSS Code

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

.generator, .scanner {
    width: 100%;
    max-width: 400px;
    margin: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 20px;
}

h1, h2 {
    text-align: center;
}

input[type="text"], button, video {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
}

button{
    background-color: brown;
    color: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

button:hover {
    background-color: black;
}

#qrcode{
    text-align: center;
    margin-top: 10px;

}

#downloadBtn {
    display: block;
    text-align: center;
    margin-top: 10px;
}

CSS Code Explanation

This CSS code provides styling instructions for a web page that includes both a QR code generator and a QR code scanner. It uses various CSS rules to define the appearance and layout of different elements on the page. Let’s break down the code:

Global Styling for Body:

font-family: Arial, sans-serif;: Sets the preferred font family for the entire body content, with fallback options.
margin: 0; padding: 0;: Removes default margin and padding from the body, ensuring a clean starting point for the layout.

Styling for Container:

display: flex; flex-direction: column; align-items: center;: Creates a flex container that aligns its items (child elements) vertically in a column and centers them horizontally.
margin-top: 50px;: Adds a margin at the top of the container to create spacing between the container and the top of the viewport.

Styling for .generator and .scanner:

These classes define the styling for the QR code generator and scanner sections.
width: 100%; max-width: 400px;: Sets the width of these sections to 100% of their parent container while limiting the maximum width to 400px.
margin: 20px; padding: 20px;: Adds margin and padding to create spacing around the sections.
border: 1px solid #ccc; border-radius: 5px;: Adds a border with rounded corners to create a bordered box effect.

Styling for Headings:

h1, h2 { text-align: center; }: Centers the text alignment of <h1> and <h2> headings.

Styling for Input, Button, and Video Elements:

input[type="text"], button, video { width: 100%; padding: 10px; margin-bottom: 10px; }: Sets the width of input fields, buttons, and video elements to 100%, adds padding, and adds margin at the bottom to separate these elements.

Styling for Buttons:

background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;: Defines the appearance of buttons, including background color, text color, no border, rounded corners, and a pointer cursor.
button:hover { background-color: #0056b3; }: Changes the background color of buttons when hovered over.

Styling for #qrcode and #downloadBtn:

#qrcode { text-align: center; margin-top: 10px; }: Centers the text alignment of the #qrcode element and adds a top margin.
#downloadBtn { display: block; text-align: center; margin-top: 10px; }: Makes the #downloadBtn a block-level element (full width), centers its text alignment, and adds a top margin.

Overall, this CSS code provides a clean and consistent visual layout for the web page. It uses flexbox for vertical centering and spacing around sections, defines styles for buttons, headings, input fields, and other elements, and ensures a user-friendly and appealing design for both the QR code generator and scanner sections.

JavaScript Code

const qrText = document.getElementById('qrText');
const generateBtn = document.getElementById('generateBtn');
const qrcodeDiv = document.getElementById('qrcode');
const downloadBtn = document.getElementById('downloadBtn');

generateBtn.addEventListener('click', () => {
    const text = qrText.value;
    if (text) {
        qrcodeDiv.innerHTML = '';
        const qrcode = new QRCode(qrcodeDiv, {
            text: text,
            width: 128,
            height: 128
        });
        downloadBtn.href = qrcodeDiv.querySelector('canvas').toDataURL("image/png");
        downloadBtn.style.display = 'block';
    }
});

const qrVideo = document.getElementById('qrVideo');
const startScanBtn = document.getElementById('StartScanBtn')
const scanResult = document.getElementById('scanResult');

startScanBtn.addEventListener('click', () => {
    qrVideo.style.display = 'block';

    navigator.mediaDevices.getUserMedia({ video: {facingMode: 'environment'} })
        .then(stream => {
            qrVideo.srcObject = stream;
            const scanner = new Instascan.Scanner({ video: qrVideo });
            scanner.addListener('scan', content => {
                scanResult.innerHTML = `scanned QR Code: ${content}`;
            });
            Instascan.Camera.getCamera()
                .then(cameras =>{
                    if (cameras.length > 0) {
                        scanner.start(cameras[0]);
                    } else {
                        console.error('No Cameras Found.');
                    }
                })
                .catch(error => console.error('Error Accessing Cameras:', error));
        });
});

JS Code Explanation

This code allows users to generate QR codes from text and scan QR codes using their device’s camera. Let’s break down the code step by step:

HTML Elements: The code assumes that you have several HTML elements with specific IDs, which are used to interact with the application. Here are the relevant HTML elements:

qrText: An input field where users can enter the text they want to generate a QR code for.
generateBtn: A button that triggers the QR code generation process.
qrcodeDiv: A div element where the generated QR code will be displayed.
downloadBtn: A button that allows users to download the generated QR code as an image.
qrVideo: An HTML video element that will display the camera feed for QR code scanning.
startScanBtn: A button that initiates the QR code scanning process.
scanResult: A div element where the scanned QR code content will be displayed.

Generate QR Code:

When the generateBtn is clicked, an event listener triggers.
It retrieves the text entered in the qrText input field.
If there’s text, it clears the content of qrcodeDiv (in case a QR code was previously generated).
It creates a new QR code using the QRCode library, passing the text, width, and height.
It sets the href attribute of downloadBtn to the data URL of the generated QR code image (PNG format).
It displays the downloadBtn.

QR Code Scanning:

When the startScanBtn is clicked, an event listener triggers.
It makes the qrVideo element visible.
It requests access to the user’s camera using the navigator.mediaDevices.getUserMedia() method.
If access is granted, it sets the camera feed as the source for the qrVideo element.
It creates a new scanner using the Instascan.Scanner library, associating it with the qrVideo element.
It sets up a listener for the scan event, which occurs when a QR code is successfully scanned.
It uses the Instascan.Camera.getCameras() method to get available cameras.
If cameras are available, it starts the scanner with the first camera.
If no cameras are found or an error occurs, appropriate error messages are logged.

Overall, this code demonstrates a basic web application that lets users generate and download QR codes from text and scan QR codes using their device’s camera. It utilizes the QRCode library for QR code generation and the Instascan library for QR code scanning.

Conclusion

In summary, the QR Code Generator and Scanner application aims to empower users by providing a comprehensive and accessible solution for creating and utilizing QR codes. Through its user-friendly interface and seamless functionality, the application seeks to simplify the process of generating and scanning QR codes, catering to both practical and educational use cases.

Download The Source Code

Subscribe to our WhatsApp Channel

Subscribe to Our YouTube Channel

How To Develop A QR Code Generator and Scanner in JavaScript (Source Code)

Table of Contents

Features

1. QR Code Generation:

2. QR Code Scanning:

How To Make QR Code Generator and Scanner.

HTML Code

HTML Code Explanation

CSS Code

CSS Code Explanation

JavaScript Code

JS Code Explanation

Conclusion

Leave a Reply Cancel reply

Table of Contents

Features

1. QR Code Generation:

2. QR Code Scanning:

How To Make QR Code Generator and Scanner.

HTML Code

HTML Code Explanation

CSS Code

CSS Code Explanation

JavaScript Code

JS Code Explanation

Conclusion

Related Posts

Leave a Reply Cancel reply

Read Also