Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 27, 2022 12:10 pm GMT

Easy Way to Create Your own QR Code Generator Website

Table of Contents

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

Original Link: https://dev.to/varshithvhegde/easy-way-to-create-your-own-qr-code-generator-website-3dn2

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To