Building a QR code generator

What is a QR code?

QR code is a later version of a data matrix barcode invented in japan in 1994, data matrix barcode was used to label automotive parts, these labels when scanned would output information pertaining to the automotive part the code referenced. This was a great way to have accessible information contained and hidden only to be accessed when needed.

Qr codes are widely used to store a variety information for business and personal use. From links to websites, advertisements, contact info, restaurant menus and payment processing etc. QR codes hold more information than data matrix barcode and makes information easier to access for anyone with a smart device camera.

I will be walking you through a simple QR code generator application made with Javascript and HTML using the JS library called qrcode on the CDNJS platform (https://cdnjs.com/libraries/qrcode). However, for those who want to use a Framework there are Node packages for QR code generation as well (https://www.npmjs.com/package/qrcode#highlights).

Let’s Build!

To begin the Process of building out your QR code generator we will add the Qr code script into the head of our HTML structure.

<script 
src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" 
  integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" 
   crossorigin="anonymous" referrerpolicy="no-referrer">
</script>

In the example below a form element is created for users to submit a URL and the size of the Qr code they prefer. (This library will also allow users to pick the color of the Qr code also if you are interested.)

<form id="generate-form">
  <input id="url"
         type="url" 
           placeholder="Enter URL here"
/>

  <select id="size">
    <option value="100">100x100</option>
    <option value="200">200x200</option>
    <option value="300" selected>300x300</option>
    <option value="400">400x400</option>
    <option value="500">500x500</option>
    <option value="600">600x600</option>
    <option value="700">700x700</option>
</select>

   <button type="submit"> 
         Generate QR Code
   </button>

</form>

The form element will submit the URL and size value needed for QR code generator functionality.

Javascript functionality

Begin with declaring two variables, form element and the element that will display the Qr code.

const form = document.getElementById('generate-form');
const qr = document.getElementById('qrcode');

Next add this code provided by the library we are using, generateQRCode() will take in two arguments and generate the QR code correlated to the arguments passed in.

const generateQRCode = (url, size) => {
        const qrcode = new QRCode('qrcode', {
            text: url, 
            width: size, 
            height: size
        })
    }

Submit function

const form = document.getElementById('generate-form');
const qr = document.getElementById('qrcode');

const generateQRCode = (url, size) => {
   const qrcode = new QRCode('qrcode', {
        text: url, 
        width: size, 
        height: size
      })
  };

const onSubmit = (e) => {
e.preventdefault();

const url = document.getElementById('url').value;
    const size = document.getElementById('size').value;
if(url === '') {
        alert('Please enter a URL');
    } else {
generateQRCode(url, size);
  }
};

form.addEventListener("submit", onSubmit);

Two variables are declared to contain the input value, a if statement to ensure filled input, if not alert user to fill input and lastly calling the generateQRCode function with the passed in arguments.

To give onSubmit functionality to form element we add event listener to listen for form submissions of Qr code and pass in the event "submit" follow by the function onSubmit.

With this you should have a functioning Qr code generator!