Create QR code generator using javascript
Tags: javascript, webdev, html, programming
Published: 2021-12-30 13:58:18

[Read the original article here or continue below](https://www.codewithrandom.com/2021/12/qr-code-generator-javascript-easy-way.html)
In this blog, we learn that how we create a QR code generator javascript. We use HTML, Css, and javascript for this QR code generator javascript. Hope you enjoy our blog so let's start with a basic HTML structure for a QR code generator javascript.
**HTML code**

```
<body>  
  <section class="heading">  
   <div class="title">QRcodes</div>  
   <div class="sub-title">Generate QRCode for anything!</div>  
  </section>  
  <section class="user-input">  
   <label for="input_text">Type something...</label>  
   <input type="text" name="input_text" id="input_text" autocomplete="off">  
   <button class="button" type="submit">Generate QR Code</button>  
  </section>  
  <div class="qr-code" style="display: none;"></div>  
 </body>  
```
There is all HTML code for the QR code generator javascript. Now, you can see output without CSS, then we write css & javascript for QR code generator javascript.

**Output**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzzgqaygtvp1zwsrbogs.png)
CSS code

```
:root {  
       font-size: 62.5%;  
 }  
  * {  
       margin: 0;  
       padding: 0;  
       box-sizing: border-box;  
       text-size-adjust: none;  
       -webkit-text-size-adjust: none;  
 }  
  button:hover {  
       cursor: pointer;  
 }  
  body {  
       display: flex;  
       flex-direction: column;  
       align-items: center;  
       background-color: #eae6e5;  
 }  
  .heading {  
       margin: 3rem 0 5rem 0;  
 }  
  .title, .sub-title {  
       font-size: 4rem;  
       text-align: center;  
       font-family: "Poppins", sans-serif;  
       color: #12130f;  
 }  
  .sub-title {  
       font-size: 1.5rem;  
       color: #8f8073;  
 }  
  .user-input {  
       display: flex;  
       flex-direction: column;  
       align-items: center;  
       width: 100%;  
 }  
  .user-input label {  
       text-align: center;  
       font-size: 1.5rem;  
       font-family: "Poppins", sans-serif;  
 }  
  .user-input input {  
       width: 80%;  
       max-width: 35rem;  
       font-family: "Poppins", sans-serif;  
       outline: none;  
       border: none;  
       border-radius: 0.5rem;  
       background-color: #9b8774 ad;  
       text-align: center;  
       padding: 0.7rem 1rem;  
       margin: 1rem 1rem 2rem 1rem;  
 }  
  .button {  
       outline: none;  
       border: none;  
       border-radius: 0.5rem;  
       padding: 0.7rem 1rem;  
       margin-bottom: 3rem;  
       background-color: #5b9279 9d;  
       color: #12130f;  
       font-family: "Poppins", sans-serif;  
 }  
  .qr-code {  
       border-top: 0.5rem solid #8f8073;  
       border-right: 0.5rem solid #8f8073;  
       border-bottom: 1rem solid #8f8073;  
       border-radius: 0.5rem;  
       border-bottom-left-radius: 0.5rem;  
       border-bottom-right-radius: 0.5rem;  
       border-left: 0.5rem solid #8f8073;  
       background-color: #8f8073;  
 }  
  .qr-code button {  
       display: flex;  
       justify-content: center;  
       background-color: #8f8073;  
       font-family: "Poppins", sans-serif;  
       color: #eae6e5;  
       border: none;  
       outline: none;  
       width: 100%;  
       height: 100%;  
       margin-top: 1rem;  
 }  
  .qr-code button a {  
       width: 100%;  
       height: 100%;  
       text-decoration: none;  
       color: #eae6e5;  
 }  
```
Now we have completed our CSS section,  Here is our updated output CSS.
output
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7n4sytx5gxjf8kml5pu6.png)
use this link in javascript as a CDN link
 

```
//https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js 
let btn = document.querySelector(".button");  
 btn.addEventListener("click", () => {  
  let user_input = document.querySelector("#input_text");  
  if (user_input.value != "") {  
   if (document.querySelector(".qr-code").childElementCount == 0) {  
    generate(user_input);  
   } else {  
    document.querySelector(".qr-code").innerHTML = "";  
    generate(user_input);  
   }  
  } else {  
   document.querySelector(".qr-code").style = "display: none";  
   console.log("not valid input");  
  }  
 });  
 function generate(user_input) {  
  document.querySelector(".qr-code").style = "";  
  var qrcode = new QRCode(document.querySelector(".qr-code"), {  
   text: `${user_input.value}`,  
   width: 180, //128  
   height: 180,  
   colorDark: "#000000",  
   colorLight: "#ffffff",  
   correctLevel: QRCode.CorrectLevel.H  
  });  
  console.log(qrcode);  
  let download = document.createElement("button");  
  document.querySelector(".qr-code").appendChild(download);  
  let download_link = document.createElement("a");  
  download_link.setAttribute("download", "qr_code_linq.png");  
  download_link.innerText = "Download";  
  download.appendChild(download_link);  
  if (document.querySelector(".qr-code img").getAttribute("src") == null) {  
   setTimeout(() => {  
    download_link.setAttribute(  
     "href",  
     `${document.querySelector("canvas").toDataURL()}`  
    );  
   }, 300);  
  } else {  
   setTimeout(() => {  
    download_link.setAttribute(  
     "href",  
     `${document.querySelector(".qr-code img").getAttribute("src")}`  
    );  
   }, 300);  
  }  
 }  
```