How to make a QR Code using JavaScript.

4 min readMar 25, 2023

Nowadays QR code is in trending and it is used everywhere. People make their website links using QR code, and many e-commerce sites and other sites use QR code to make their business contactless. So in this blog post, I will show you that how you can make or generate QR codes using Vanilla JavaScript. It is very easy and very few lines of code are required to make a QR code generator.

Files we need to create.

HTML File.
CSS File.
JavaScript File

HTML File Code

First of all, I have to write Html boilerplate. I am using Vs Code text editor in Vs Code editor after creating Html file we have to just type html after that select html 5. By doing this we get the whole Html boilerplate in one click. After that, I make a container using a div element and give it a class name as a container. Inside the Container, I put this code…

This much content is required for the Html file. Take this code as a reference to build your Html file.

CSS File Code.

After creating the CSS file link the CSS with your html file.

1st Part.

I have imported fonts from Google Fonts. In this Project, I have used the Poppins and Quicksand font family and font weights of 100, 200, 500, 700, and bold. You can set your own font-weight in this line

2nd Part.

This is the second part of my CSS page. You can check the code as a reference to build your own CSS file.

3rd Part.

In this CSS Part, I have used media query for mobile-friendly content. I have used media query of max width 400px. After writing this media query code you can check your code by using inspect. Right-click on the browser then click inspect, and after a new inspect window will open. After that click on the toggle device toolbar

After Clicking that a new option will show in the left top side and then click on the Dimensions Responsive button to check you website on different devices.

After writing media query the CSS part of our website is done 👍.

Now the JavaScript begins.

JavaScript File Code.

Link the JavaScript file with the html file using the script tag

First of I use DOM to get all the necessary Dom elements from Html. Adding Click Event Listener in the Generate button. Under the event function, I used
XMLHttpRequest to call an API (In this blog post I am not explaining the XMLHttpRequest concept. If you have any confusion regarding this you can visit this channel). After that, I have to change the innerHTML of the paragraph to “Your Qr is”. I have to write Some Html Code under Link_Area.

In the last part, I have add a click event Listener at the return button. On clicking the event the browser will reload automatically.