Generate QR Code Using JQuery

While browsers like Chrome can generate QR codes for URLs, it’s always interesting to learn how to make your own version of a simple QR code generator.

So, let’s get started.

HTML

<section class="heading">
    <div class="title">QRcodes</div>
    <div class="sub-title">Generate QRCode</div>
</section>
<section class="user-input">
    <label for="input_text">Type something...</label>
    <input type="text" name="input_text" id="input_text" autocomplete="off">
    <button class="button" type="submit">Generate QR Code</button>
</section>
<div class="qr-code" style="display: none;"></div>

JavaScript

First, we’ll create an event that fires when the user clicks the Generate QR code button.

let btn = document.querySelector(".button");
btn.addEventListener("click", () => {
   //code
})

Now, we’ll write a function called generate() that will be called whenever the user clicks the Generate QR code button. This function will take the user’s text input as a parameter.

function generate(user_input) {
    //code
}

We can use this library via a CDN by including the below <script> tag in the <head> tag of html.

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

Using the provided library, we will create a new object within the generate() function. It will accept two arguments: the element in which the QR code must be displayed and the content for which the QR code must be generated, as well as some options to customise the QR code.

function generate(user_input) {
    var qrcode = new QRCode(document.querySelector(".qr-code"), {
        text: `${user_input.value}`,
        width: 180, //default 128
        height: 180,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });
}

Next, we will create a download button and append it below the QR code.

let download = document.createElement("button");
document.querySelector(".qr-code").appendChild(download);

We will include a link within this download button that will allow users to download the QR code with a specific file name and append it to the download button.

let download_link = document.createElement("a");
download_link.setAttribute("download", "qr_code_linq.png");
download_link.innerText = "Download";
download.appendChild(download_link);

Below is the complete Code for QR code Generation

function generate(user_input){

    document.querySelector(".qr-code").style = "";

    var qrcode = new QRCode(document.querySelector(".qr-code"), {
        text: `${user_input.value}`,
        width: 180, //128
        height: 180,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });

    console.log(qrcode);

    let download = document.createElement("button");
    document.querySelector(".qr-code").appendChild(download);

    let download_link = document.createElement("a");
    download_link.setAttribute("download", "qr_code_linq.png");
    download_link.innerText = "Download";

    download.appendChild(download_link);

    if(document.querySelector(".qr-code img").getAttribute("src") == null){
        setTimeout(() => {
            download_link.setAttribute("href", `${document.querySelector("canvas").toDataURL()}`);
        }, 300);
    } else {
        setTimeout(() => {
            download_link.setAttribute("href", `${document.querySelector(".qr-code img").getAttribute("src")}`);
        }, 300);
    }
}
btn.addEventListener("click", () => {
    let user_input = document.querySelector("#input_text");
    if(user_input.value != "") {
        if(document.querySelector(".qr-code").childElementCount == 0){
            generate(user_input);
        } else{
            document.querySelector(".qr-code").innerHTML = "";
            generate(user_input);
        }
    } else {
        document.querySelector(".qr-code").style = "display: none";
        console.log("not valid input");
    }
})

OUPUT

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories