DEV Community

Cover image for Create QR code generator using javascript
Code with Random
Code with Random

Posted on

Create QR code generator using javascript

Read the original article here or continue below
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>  
Enter fullscreen mode Exit fullscreen mode

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
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;  
 }  
Enter fullscreen mode Exit fullscreen mode

Now we have completed our CSS section, Here is our updated output CSS.
output
Image description
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);  
  }  
 }  
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
suhakim profile image
sadiul hakim

nice. Try to make code colorful.

Collapse
 
codewith_random profile image
Code with Random

Thanks , will try it