Now a days QR code is in trending and it is used in everywhere. People make their website link using QR code, many ecommerce site and other site using QR code to make their business contactless. So in this blogpost I will show you that how you can make or generate QR code using Vanilla JavaScript. It is very easy and very few lines of code is 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 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 div element and give it a class name as container. Inside the Container I put this code...
This much of content is required for the Html file. Take this code as 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 import fonts from Google Fonts.
In this Project I have used Poppins and Quicksand font family and
font weight 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 reference to build your own CSS file.
3rd Part.
In this CSS Part I have use media query for mobile friendly content.
I have use media query of max width 400px. After writing this media query code you can check you code by using inspect. Right click on the browser than click inspect, after that new inspect window will open. After that click own 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 begin.
JavaScript File Code.
Link the JavaScript file with the html file using 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 blogpost I am not explaining the xmlhttprequest concept. If you have any confusion regarding this you can visit this channel). After that I have change the innerHTML of the paragraph into "Your Qr is". I have write Some Html Code under Link_Area.
At the last part I have add a click event Listener at the return button. On clicking the event the browser will reload automatically.
The output of my code before generate QR code
The output of my code after generate QR code
The Source Code of the whole project.
Visit my Git Hub Profile to get source code.
Visit QR code generator api.
👍