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

it is necessary because the qr code is going to be shown here only, and in last we importing the script.( main.js is the code we are making and qrcode.min.js is the base code)

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

Comments

[Jon Randy 🎖️]

The title of the post is misleading. You're actually just building an interface to run an imported QR code generator when a button is clicked. The generator itself is prebuilt. Would be far more interesting to actually write the generator itself, and do a post about that

[The Vik]

I wrote that in the blog lmao

[Jon Randy 🎖️]

It doesn't clearly say that anywhere. You open with:

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

Which could easily read as: 'the code to make a QR code is easy to write because of the wealth of information online about how QR codes work' - because you again state that you are 'making a qr-code generator'

[The Vik]

You have got that wrong or maybe didnt wrote it, I have also mentioned in the blog that the base code isnt written by me.

[Federico "Edo" Granata]

The title remains misleading even if you clarify in the post that you aren't really a qr code generator

[luigicampbell]

Neat idea! I also would have liked to see more of the nuts and bolts as I don't know much about we code generators. Maybe a brief example as to what they are and how they work before showing us how we could use one.

As for some suggestions, please understand my intent is to help here and to try and motivate.

Please read up on ES6 on 'let' vs 'const' for a better explanation but the important thing is to create something called block scope and also protect against weird side effects introduced by hoisting with the var instruction. As some general advice, try 'const' first and change to 'let' if you have to. Stay away from var unless you use it exclusively and/or are a solo coder.

Another tip is to either use only es5 and function keywords or arrow function syntax for call backs if you're gonna be using let and const anyway. Makes it look more consistent and familiar to a team which eases development and lowers development time (longer weekends!) Along this train of thought, look into design practices involving more descriptive variable and function names.

Keep it up!

[Prabhu]

Nice

[Bonnie Grande]

Create your QR code for free online at qrcode-decoder.com/qr with different format URL, Text, WIFI, Bitcoin, and more and Scan your QR code online in your Chrome, Safari or Firefox browser. at qrcode-decoder.com

[Navaneeth V]

Nice click Bait