DEV Community

Cover image for Easy Way to Create Your own QR Code Generator Website
Varshith V Hegde
Varshith V Hegde

Posted on

Easy Way to Create Your own QR Code Generator Website

Table of Contents

Introduction

In this project, we will be building a QR Code Generator Website using HTML, CSS, and JavaScript. This website will allow the user to generate a QR code for any text or link.

What is QR Code?

QR Code is a two-dimensional barcode that can be read by smartphones. It is used to store information such as URLs, phone numbers, addresses, and more. QR codes are used in many places, such as business cards, product packaging, and more. QR codes are used to store information such as URLs, phone numbers, addresses, and more. QR codes are used in many places, such as business cards, product packaging, and more.

QR codes are used to store information such as URLs, phone numbers, addresses, and more. QR codes are used in many places, such as business cards, product packaging, and more.

Prerequisites

  • VS Code or any other code editor
  • Basic knowledge of HTML
  • Basic knowledge of CSS
  • Basic knowledge of JavaScript

Steps to create QR Code Generator Website

Step 1: Create a new HTML file

Create a new HTML file and name it index.html. Add the following code to the file.

<!doctype html>
    <head>
        <title>JavaScript QR Code Generator</title>
    </head>
    <body>
        <div class="card">
        <h3>QR Code Generator</h3>

        <div><input id="qr-text" type="text" placeholder="Enter Text to generate QR code"/></div>
        <br/>
        <div>
            <button class="qr-btn" onclick="generateQRCode()">Create QR Code</button>
        </div>
        <br/>
        <p id="qr-result">This is deault QR code:</p>
        <canvas id="qr-code"></canvas>
        </div>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • The input tag is used to create an input field where the user can enter the text to generate the QR code.
  • The button tag is used to create a button to generate the QR code.
  • The canvas tag is used to create a canvas to display the QR code.

  • The onclick attribute is used to call the generateQRCode() function when the button is clicked.

    Step 2 : Add CSS to the HTML file

  • Inside the head tag, add the following code to add CSS to the HTML file.

<style>
    body {
        padding:20px;
        align-items: center;
        justify-content: center;
        display: flex;
    }
    input {
        padding:5px;
        background-color:transparent;
        border:none;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom:solid 4px #8c52ff;
        width:250px;
        font-size:16px;
    }
    .qr-btn {
        background-color:#8c52ff;
        padding:8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color:white;
        cursor:pointer;
    }
    .card{
        width: 300px;
        height: 450px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #c4f9ff;
        border-radius: 10px;
        padding: 10px;
        margin: 10px;
        display: inline-block;
    }
    .card h1{
        font-size: 20px;
        font-weight: 500;
        text-align: center;
    }          
</style>
Enter fullscreen mode Exit fullscreen mode
  • Above code is for styling the HTML file.
  • You can customize the CSS according to your needs.

Step 3 : Add JavaScript to the HTML file

  • Here we are using the external library for generatring the QR code.

  • That library is qrious.min.js.

  • To add the external library, add the following code inside the head tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
Enter fullscreen mode Exit fullscreen mode
  • To make everything work, add the following code inside the body tag. 
<script>
      var qr;
      (function () {
        qr = new QRious({
          element: document.getElementById("qr-code"),
          size: 200,
          value: "https://varshithvhegde.me",
        });
      })();

      function generateQRCode() {
        var qrtext = document.getElementById("qr-text").value;
        document.getElementById("qr-result").innerHTML =
          "QR code for " + qrtext + ":";

        qr.set({
          foreground: "black",
          size: 200,
          value: qrtext,
        });
      }
    </script>
Enter fullscreen mode Exit fullscreen mode
  • The generateQRCode() function is used to generate the QR code.
  • The qr.set() function is used to set the value of the QR code.
  • The qrtext variable is used to store the value of the input field.
  • The qr-result element is used to display the result.
  • The qr-code element is used to display the QR code.
  • The qr variable is used to store the QR code.

Final Code in one file 

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
    <style>
      body {
        padding: 20px;
        align-items: center;
        justify-content: center;
        display: flex;
      }
      input {
        padding: 5px;
        background-color: transparent;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: solid 4px #8c52ff;
        width: 250px;
        font-size: 16px;
      }

      .qr-btn {
        background-color: #8c52ff;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        cursor: pointer;
      }
      .card {
        width: 300px;
        height: 450px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #c4f9ff;
        border-radius: 10px;
        padding: 10px;
        margin: 10px;
        display: inline-block;
      }

      .card h1 {
        font-size: 20px;
        font-weight: 500;
        text-align: center;
      }
      @media screen and (max-width: 600px) {
        .card {
          width: 100%;
        }
      }
    </style>
    <title>JavaScript QR Code Generator</title>
  </head>
  <body>
    <div class="card">
      <h3>QR Code Generator</h3>

      <div>
        <input
          id="qr-text"
          type="text"
          placeholder="Enter Text to generate QR code"
        />
      </div>
      <br />
      <div>
        <button class="qr-btn" onclick="generateQRCode()">
          Create QR Code
        </button>
      </div>
      <br />
      <p id="qr-result">This is deault QR code:</p>
      <canvas id="qr-code"></canvas>
    </div>

    <script>
      var qr;
      (function () {
        qr = new QRious({
          element: document.getElementById("qr-code"),
          size: 200,
          value: "https://varshithvhegde.me",
        });
      })();

      function generateQRCode() {
        var qrtext = document.getElementById("qr-text").value;
        document.getElementById("qr-result").innerHTML =
          "QR code for " + qrtext + ":";

        qr.set({
          foreground: "black",
          size: 200,
          value: qrtext,
        });
      }
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • Hurrah🎉! You have successfully created a QR Code Generator Website.
  • Now, let's see the output.
  • Live Demo : QR Code Generator

Output

Conclusion

  • In this tutorial, we have learned how to create a QR code generator using JavaScript.
  • Let me know your thoughts in the comments section below.

Top comments (2)

Collapse
 
azzarox profile image
Azzarox •

How can I use qrious with import statement? I tried to import from './node_modules/...' and so on but it gives me "global is undefined"? Or is it just that the library should be used in a script tag?

Collapse
 
varshithvhegde profile image
Varshith V Hegde •

Sorry but i doesn't have knowledge about node. I will reasearch and if I get anything I will let you know.

Read next

sbenhoff profile image

Lead Developer Career Guide – on Amazon!

Shelley Benhoff -

chiragagg5k profile image

How a Viral Tweet Landed Me Multiple Job Interviews

Chirag Aggarwal -

leemeganj profile image

How to use the lazy initialization pattern with Rust 1.80

Megan Lee -

nozibul_islam_113b1d5334f profile image

Decoding User Experience: 5 Fundamental Laws Every Designer Should Know

Nozibul Islam -