QR Code Generator Using JavaScript & CSS

QR Code Generator Using JavaScript & CSS (Free Code)

In this article, you will learn how to create a QR code generator using JavaScript.
If you know basic JavaScript, you can easily create a simple QR code generator Javascript. You can follow our other site Tech Virtual to create more other types of JavaScript QR Code Generator.

QR code is a type of matrix barcode that is currently used in almost all digital payments and products. In fact, it is a machine-readable optical label that contains some special information about the product.

QR Code Generator Using JavaScript

I have shared many more types of JavaScript projects before. This JavaScript QR code generator is fully operational.

JavaScript QR Code Generator

There are many such QRcode js examples on the internet. But here I have shared the complete tutorial and tried to explain to you step-by-step how to create a QR code generator using JavaScript.

This QR code generator JavaScript has been created in a very simple way. Here you can create a matrix barcode of any text or link.

If you do not understand what I am saying and would like to get a live demo of this project then use the demo below.

See the Pen
JavaScript QR Code Generator by Shantanu Jana (@shantanu-jana)
on CodePen.

Hopefully, the preview above has helped you to understand how this QR code generator JavaScript works.

It is fully functional which means it will work perfectly when you scan it using QR scanner.

Many people think that it is very difficult to create this kind of pure javascript QR code generator. In fact, it is not. You can easily create if you know basic HTML CSS and javascript.

How to make a QR Code generator in JavaScript

First I added all the information using HTML. Then designed a QR Code Generator using JavaScript. JavaScript and qrcode.js CDN are used last.

There is a place input in which you can input any text or link. Then there is a small display in which the QR Code can be seen.

Now if you want to create this QR code generator javascript then follow the tutorial below.

Step 1: Basic structure of QR code Generator

A box has been created on the web page using the following HTML and CSS. Which will serve as the basic structure of this QR Code Generator Javascript.

<div class=”form”>
</form>
body{
    background: rgb(200, 220, 224);
}
.form {
  font-family: Helvetica, sans-serif;
  max-width: 400px;
  margin: 100px auto;
  text-align: center;
  padding: 16px;
  background: #ffffff;
}
Basic structure of QR Generator

Step 2: Add a heading in the barcode generator

The following HTML and CSS are used to create a heading in the QR code generator using Javascript. This heading is just to enhance the beauty.

<h1>QR Code Generator</h1>
.form h1 {
  background: #03773f;
  padding: 20px 0;
  font-weight: 300;
  text-align: center;
  color: #fff;
  margin: -16px -16px 16px -16px;
  font-size:  25px;
}
Add a heading in the barcode generator

Step 3: All information of JavaScript QR Code Generator

By below HTML, I have added all the rest of the information in this javascript QR code generator. Such as input space, QR code viewing display, a generator button, etc.

<form>
  <input type=”url” id=”website” name=”website” placeholder=”https://webisora.com” required />
  <div id=”qrcode-container”>
      <div id=”qrcode” class=”qrcode”></div>
  </div>
  <button type=”button” onclick=”generateQRCode()”>Generate QR Code</button>
</form>

1. Design a place to input

The input space is designed using the following CSS. Within this input box, you can input text and URLs.

.form input[type=”text”],
.form input[type=”url”] {
  box-sizing: border-box;
  width: 100%;
  background: #fff;
  margin-bottom: 4%;
  border: 1px solid #ccc;
  padding: 4%;
  font-size: 17px;
  color: rgb(9, 61, 125);
}
.form input[type=”text”]:focus,
.form input[type=”url”]:focus {
  box-shadow: 0 0 5px #5868bf;
  padding: 4%;
  border: 1px solid #5868bf;
}
All information of QR Code Generator

2. Design a place to view the QR Code

Now an area has been created to view the generated QR code. You must use the following CSS to design this area. Machine-readable code will be generated in this area when you click on the Generate button.

#qrcode-container{
  display:none;
}
.qrcode{
  padding: 16px;
  margin-bottom: 30px;
}
.qrcode img{
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(67, 67, 68, 0.25);
  padding: 4px;
}

The result I have shown below will not be seen in this step. The qr code can be seen after using JavaScript. I have given this image which will help you to understand what will change in qrcode js example after using this CSS.

QR Code Generator Using JavaScript

3. Design the QR Generate button

The following CSS has been used to design the QR code generating button.

.form button {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 180px;
  margin: 0 auto;
  padding: 3%;
  background: #0853b6;
  border: none;
  border-radius: 3px;
  font-size: 17px;
  border-top-style: none;
  border-right-style: none;
  border-left-style: none;
  color: #fff;
  cursor: pointer;
}
.form button:hover {
  background: rgba(88,104,191, 0.5);
}
Design the QR Generate button

Step 4: Activate QR Code Generator using JavaScript

Now we need to implement this QR code generator JavaScript. First, we need to use a QR code js CDN which will generate the QR code. You must include this API link in your HTML file.

<script src=”https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js”></script>

Now all the controls have been added by the following javascript of this QR code generator javascript. Here I have given an explanation in each line. Hopefully, you won’t have any difficulty understanding the JavaScript code below.

function generateQRCode() {
  let website = document.getElementById(“website”).value;
  if (website) {
     let qrcodeContainer = document.getElementById(“qrcode”);
     qrcodeContainer.innerHTML = “”;
     new QRCode(qrcodeContainer, website);
     document.getElementById(“qrcode-container”).style.display = “block”;
  } else {
     alert(“Please enter a valid URL”);
  }
}

Hopefully, the above tutorial has helped you to know how this HTML QR code generator works.

Here we have learned how to create a QR code generator JavaScript. Next time I am going to write an article that can scan the QR code. Please comment on how you like this javascript QR code generator.