Easy Way to Create Your own QR Code Generator Website

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Varshith V Hegde

Introduction
What is QR Code?
Prerequisites
Steps to create QR Code Generator Website
- Step 1: Create a new HTML file
- Step 2 : Add CSS to the HTML file
- Step 3 : Add JavaScript to the HTML file
- Final Code in one file
Output
Conclusion

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>

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>

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>

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>

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>

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.

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Varshith V Hegde

Print Share Comment Cite Upload Translate Updates

APA

Varshith V Hegde | Sciencx (2022-09-27T12:10:25+00:00) Easy Way to Create Your own QR Code Generator Website. Retrieved from https://www.scien.cx/2022/09/27/easy-way-to-create-your-own-qr-code-generator-website/

MLA

" » Easy Way to Create Your own QR Code Generator Website." Varshith V Hegde | Sciencx - Tuesday September 27, 2022, https://www.scien.cx/2022/09/27/easy-way-to-create-your-own-qr-code-generator-website/

HARVARD

Varshith V Hegde | Sciencx Tuesday September 27, 2022 » Easy Way to Create Your own QR Code Generator Website., viewed ,<https://www.scien.cx/2022/09/27/easy-way-to-create-your-own-qr-code-generator-website/>

VANCOUVER

Varshith V Hegde | Sciencx - » Easy Way to Create Your own QR Code Generator Website. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/09/27/easy-way-to-create-your-own-qr-code-generator-website/

CHICAGO

" » Easy Way to Create Your own QR Code Generator Website." Varshith V Hegde | Sciencx - Accessed . https://www.scien.cx/2022/09/27/easy-way-to-create-your-own-qr-code-generator-website/

IEEE

" » Easy Way to Create Your own QR Code Generator Website." Varshith V Hegde | Sciencx [Online]. Available: https://www.scien.cx/2022/09/27/easy-way-to-create-your-own-qr-code-generator-website/. [Accessed: ]

rf:citation

» Easy Way to Create Your own QR Code Generator Website | Varshith V Hegde | Sciencx | https://www.scien.cx/2022/09/27/easy-way-to-create-your-own-qr-code-generator-website/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Table of Contents