Creating a QR Code Generator with JavaScript

This QR Code can be used anywhere, for example, on a poster or website to allow users to get additional information. This application will allow the user to type in the data required and save it a PNG or SVG image of the QR code.While you can generate QR codes for URLs in browsers such as Chrome, it’s always interesting to learn how you can make your own version of a simple QR code generator.

A QR code generator is a software or online tool that allows you to create QR codes, which are two-dimensional barcodes that can be scanned using a smartphone camera or a QR code scanner. These codes can store various types of data, such as text, URLs, and contact information.

To generate a QR code in JavaScript, you can use a library such as QRcode.js, which is a library that allows you to generate QR codes in the browser. The library works by creating an HTML canvas element and drawing the QR code on it. The basic usage of the library is as follows:

First, include the library in your HTML file by adding a script tag that points to the library's location.
Next, create a new instance of the QR code object by passing in the data you want to encode, and the size of the QR code.
Finally, you can call the makeCode() function on your QR code object to generate the QR code.

Here is an example of generating a QR code that contains a URL:

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

</head>
<body>
  <div class="code">
    <form action="#" id="frm">

     <div class="form-group">
      <label for="url">Enter Website Link</label>
      <input type="url"  id="url" placeholder="Enter URL" required>
     </div>

     <div class="form-group">
      <label for="size">Select Your Size</label>
      <select id="size">
        <option value="100">100x100</option>
        <option value="200">200x200</option>
        <option value="300">300x300</option>
        <option value="400">400x400</option>
      </select>
    </div>
    <div class="form-single-group">
      <label for="colorDark">Color Dark</label>
      <input type="color" id="colorDark" value="#000000">
    </div>
    <div class="form-single-group">
      <label for="colorLight">Color Light</label>
      <input type="color" id="colorLight" value="#ffffff">
    </div>
    <button type="submit">Generate QR Code</button>
    <a href="#" id="btn-save" download>Save Picture</a>
    </form>
  </div>
  <div class="output">
    <div id="qrcode">
      <img src="images/joes.png">
    </div>
    <div id="loading">
      <div id="spinner"></div>
      <p>Please Wait</p>
    </div>
  </div>
  <script src="js/script.js"></script>
</body> 
</html>

css/style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:#57606f;

}

.code{
  width: 500px;
  height: 500px;
  background-color:#f1f2f6 ;
  padding: 20px;
}

.output{
  width: 500px;
  height: 500px;
  background-color:#2f3542 ;
  padding: 20px;
  position: relative;
}

.output img{
  width: 100%;
  height: 100%;
}

.form-group{
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.form-single-group{
  margin-bottom: 10px;
  display: flex;
  gap:25px;
}
input[type='url'],
select{
  height: 30px;
  padding-left: 10px;
  outline: none;
  border:1px solid #ccc;
}
button{
  width: 200px;
  height: 40px;
  background-color:#ff4757;
  color:white;
  border:none;
  font-weight: 400;
}


#loading{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #3742fa;
  top:0;
  left: 0;


  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#loading p{
  color:white;
  font-size: 15px;
  margin-top: 10px;
}
#spinner{
  width: 75px;
  height: 75px;
  /*
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);*/

  border:5px solid #5352ed;
  border-radius: 50%;
  border-top-color:white;
  animation: spin 1s ease-in-out infinite;
}


@keyframes spin {
  to{
    transform: rotate(360deg);
  }
}


#btn-save{
  background-color:#2ed573;
  display: inline-block;
  width: 200px;
  height: 40px;
  color:white;
  font-weight: 400;
  text-align: center;
  line-height: 40px;
  text-decoration: none;
}

This code is a JavaScript implementation of a QR code generator. When a user submits the form with the ID "frm", the function "generateQRCode" is called, which prevents the default form behavior (e.preventDefault()). Then, the code gets the values of the input fields with the IDs "url", "size", "colorDark", and "colorLight". If the URL input field is empty, an alert is displayed to the user to enter a website link. Otherwise, the code displays a loading spinner while the QR code is being generated. The code uses the "QRCode" library to create a new QR code with the specified URL, size, colorDark, colorLight and correct level. Then, it hides the spinner and updates the QR code on the page.

The function createDownloadLink() is used to create a download link for the generated QR code image. The image source is obtained from the 'qrcode' element, and the href attribute of the download button is set to the source of the image. The function is called when the user clicks the download button. The download attribute is set to 'qrcode' to download the image with that name.

js/script.js

const frm=document.querySelector('#frm');
const output=document.querySelector('#output');
const spinner=document.querySelector('#loading');
const qrcodeElement=document.querySelector('#qrcode');
const btnSave=document.querySelector('#btn-save');



function generateQRCode(e){
  e.preventDefault();
  const url=document.querySelector('#url').value;
  const size=document.querySelector('#size').value;
  const clrDark=document.querySelector('#colorDark').value;
  const clrLight=document.querySelector('#colorLight').value;

  if(url===""){
    alert("Please Enter Your Website Link");
  }else{
    //Show Spinner
    spinner.style.display='flex';

    setTimeout(()=>{

        //Hide Spinner
        spinner.style.display='none';
        qrcodeElement.innerHTML="";

        const qrcode=new QRCode('qrcode',{
          text: url,
          width: size,
	        height: size,
          colorDark : clrDark,
	        colorLight : clrLight,
          correctLevel : QRCode.CorrectLevel.H
        });


    },1000);

    
    createDownloadLink();
  }
}
frm.addEventListener('submit',generateQRCode);

function createDownloadLink(){
  const imgSrc=qrcodeElement.querySelector('img').src;
  btnSave.href=imgSrc;
}

btnSave.addEventListener('click',()=>{
  setTimeout(()=>{
    btnSave.download='qrcode';
  },50);
});

Output

Live Preview