Easy Way to Create Your own QR Code Generator Website
Published: 2022-09-27 12:10:25

## Table of Contents


  - [Introduction](#introduction)
  - [What is QR Code?](#what-is-qr-code)
  - [Prerequisites](#prerequisites)
  - [Steps to create QR Code Generator Website](#steps-to-create-qr-code-generator-website)
    - [Step 1: Create a new HTML file](#step-1-create-a-new-html-file)
    - [Step 2 : Add CSS to the HTML file](#step-2--add-css-to-the-html-file)
    - [Step 3 : Add JavaScript to the HTML file](#step-3--add-javascript-to-the-html-file)
    - [Final Code in one file](#final-code-in-one-file)
  - [Output](#output)
  - [Conclusion](#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.

```html
<!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.

```html
<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`](https://github.com/neocotic/qrious).

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

```html
<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.

```html
<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
<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](https://varshithvhegde.github.io/qrweb/)  

## Output

{% codepen https://codepen.io/varshithvhegde/pen/eYryVZb %}


## 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.