How to make a qr-code generator with JavaScript

Making a qr-code generator is pretty simple tbh because of the existing stuff available on the internet.

Source Code Of This Blog
Try Out The QRCODE Generator We Are Going To Make In This Blog

    <input type="text" onchange="generateQR()" id="url" 
    placeholder="Place Your Url">
    <button id="makeQR">
        Generate QR Code
    </button>
    <div id="output"></div>
    <script src="qrcode.min.js"></script>
    <script src="main.js"></script>

let qrcode = new QRCode(document.getElementById('output'));
let qrdata = document.getElementById('url');
let makeQr = document.getElementById('makeQR')

function generateQR() {
    var data = qrdata.value;
    qrcode.makeCode(data)
}

makeQr.addEventListener('click', function() {
    generateQR()
})

Okay so thats all of the code you got to understand to make this.

First of all you have to download this from https://davidshimjs.github.io/qrcodejs/ this is nesecarry to be downloaded because the base code isnt mine its this guy who made it.

Okay so now first we are gonna make the html

    <input type="text" onchange="generateQR()" id="url" 
    placeholder="Place Your Url">
    <button id="makeQR">
        Generate QR Code
    </button>
    <div id="output"></div>
    <script src="qrcode.min.js"></script>
    <script src="main.js"></script>

First we are making a input box and giving it onchange="generateOR()" which is a function we are making in main.js also we giving it a ID.
then we making a button and giving it a ID too.
Now we making a

let qrcode = new QRCode(document.getElementById('output'));
let qrdata = document.getElementById('url');
let makeQr = document.getElementById('makeQR')

function generateQR() {
    const data = qrdata.value;
    qrcode.makeCode(data)
}

makeQr.addEventListener('click', function() {
    generateQR()
})

Okay in the first three lines we are just importing all of the ids we gave in our html by using document.getElementById.

let qrcode = new QRCode(document.getElementById('output'));

in this line we are making a new QRCode and it is important because there is something in qrcode.min.js so if we write new QRCode when import out div then it is going to automatically find that this is the div it is going to show the generated qr.

function generateQR() {
    const data = qrdata.value;
    qrcode.makeCode(data)
}

Here we are making the generateOR function ( used in html ) and making a const named data and getting qrdata.value ( the value of that input box ) at last we are adding qrcode.makeCode(data) ( qrcode is that div ) and makeCode means generate QR Code and (data) menas qrdata.value ( value of input box )

this code should now also work if we write the link and press enter but if you want that the qrcode also shows when we click on the button then

makeQr.addEventListener('click', function() {
    generateQR()
})

here we arent doing much just adding a event listener 'click' and passing generateOR() function in it

Thanks for reading till the ending you can follow me on github and star this repo