The first thing is to write the html code of our QR Code generator. We need an input field where we type the text to be converted. Then a button that will trigger the QR code. The generated QR code will be displayed in the qrcode div.
The button element is accessed using the document.getElementById(‘click’); code and assigned a variable name. This will let us modify the generate qr code button.
The other element we need to access is the text input var qrdata = document.getElementById(‘qrdata’);. This will let us grab anything that is inputted.
Other objects attached to the qrcode variable includes the width, height, and colors of the qr Code. You can change the dark color to red or anything you want and also the white color.
The next thing is to write the function to generate the qr code. We have to grab the input value first with qrdata.value; and assign it to a variable named data then make the qr code with whatever text written in the input field qrcode.makeCode(data);.
The last thing is to create an event listener on the generate button that triggers the generateQRCode btn.addEventListener(‘click’, generateQRCode);.
You can see the outcome below
Check out the code on codepen