Text to colored QR code generator web application – JavaScript, HTML, CSS

By Aditya Pradhan

Post Views: 871

Hello everyone, today in this tutorial you will learn how to create text to colored QR code generator web application

Follow the following steps to create the text for the colored QR code generator

In the first step open VS code and create a file named qrcodesite.html.
Then in the next step, create a CSS file to add styling to the webpage named qrcodestyle.css.
Then in the next step, create a JavaScript file named qrcode.js to add functionally to the webpage.

Steps to create color QR code generator using HTML, CSS and JavaScript

Follow the following steps to create the main website for the colored QR code

In the next step, create the boilerplate template, which is any website’s basic format or structure.
In the next step, create 3 input HTML elements that take input for the text, background color, and foreground color.
In the next step, create a canvas HTML element used to create space to generate the QR code on the webpage.
In the next step, create an HTML button element named Generate colored QR code, which is used to call the function to create a QR code.
In the next step, create a script tag and add a source link i.e. https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
```

Use the above link to access the JavaScript library function to customize the QR code by adding background and foreground colors.

The above link i.e. cdnjs.cloudflare.com/ is used to get faster access to the JavaScript library.

Next, the link i.e. ajax/libs/qrious/4.0.2/ used to specify the location of the JavaScript library named qrious version 4.0.2.

Then finally the link i.e. /qrious.min.js uses this main library function to customize the QR code.

The HTML file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Text to colored QR Code Generator</title>
    <link rel="stylesheet" href="qrcodestyle.css" />
  </head>
  <body>
    <h1 class="headingone">Welcome Everyone</h1>
    <h2 class="headingtwo">Colored QR Generator</h2>
    <div class="container">
      <p class="paraone">Enter your text</p>
      <br />
      <input type="text" id="textInput" required />
      <p class="paratwo">Enter your background color</p>
      <br />
      <input type="text" id="backgroundColor" required />
      <p class="parathree">Enter your foreground color</p>
      <br />
      <input type="text" id="foregroundColor" required /><br />
      <canvas id="qrCode"></canvas>
      <button onclick="generateQR()" class="buttonstyle">
        Generate colored QR code
      </button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
    <script src="qrcodej.js"></script>
  </body>
</html>

Steps to create the CSS file for styling

Follow the following steps to create the CSS file to add styling to the main website

In the first step assign classes and IDs to each HTML element in the HTML file.
This will help to uniquely identify the HTML tag and add styling to it.

The CSS file

.headingone {
  text-align: center;
}

.headingtwo {
  text-align: center;
}

* {
  background-color: #5c5c60;
}

.buttonstyle {
  background-color: white;
}

.container {
  margin-left: 15%;
  width: 50%;
  height: 650px;
  padding-left: 27%;
  margin-top: 32px;
}

.paraone {
  width: 270px;
  height: 25px;
  text-align: center;
  font-size: large;
}

.paratwo {
  width: 270px;
  height: 25px;
  text-align: center;
  font-size: large;
}

.parathree {
  width: 270px;
  height: 25px;
  text-align: center;
  font-size: large;
}

.buttonstyle {
  margin-top: 140px;
  width: 250px;
  margin-left: 100px;
  height: 40px;
  font-size: large;
}

.buttonstyle:hover {
  cursor: pointer;
}

#textInput {
  margin-bottom: 10px;
  height: 25px;
  width: 260px;
  background-color: #828386;
  border-width: 5px;
  font-size: large;
}

#backgroundColor {
  margin-bottom: 10px;
  height: 25px;
  width: 260px;
  background-color: #6f7175;
  border-width: 5px;
  font-size: large;
}

#foregroundColor {
  margin-bottom: 10px;
  height: 25px;
  width: 260px;
  background-color: #b0b3c0;
  border-width: 5px;
  font-size: large;
}

#qrCode {
  margin-left: 100px;
  transform: scale(2);
}

The website text to colored QR code generator where you can select the background and foreground color as user's choice

The colored QR code generator website

Steps to create the JavaScript file

Follow the following steps to create a JavaScript file to make the website functional

In the first step create a JavaScript file named qrcode.js and link the JS file through the HTML file by using the script tag.

The JavaScript File

let qr;
(function () {
  qr = new QRious({
    element: document.querySelector("#qrCode"),
  });
})();

const generateQR = () => {
  const textInput = document.querySelector("#textInput").value;
  const backgroundColor = document.querySelector("#backgroundColor").value;
  const foregroundColor = document.querySelector("#foregroundColor").value;
  qr.set({
    value: textInput,
    background: backgroundColor,
    foreground: foregroundColor,
  });
};

Now create a variable named qr.
Use the above variable to store the QRious object used for customization of the QR code.
Now use the IIFE i.e. immediately invoked function expression to execute the QRious object once the script tag loads completely.
You use this type of function because the QR code must be generated first before the user should interact with the website.
The syntax for the IIFE function is (function () {…….})();
Now in the next step introduce the QRious object in the qr variable inside the IIFE.
Now use the querySelector to uniquely identify the canvas tag through its ID or its class name.
You use the querySelector because it will help to uniquely identify the canvas and load the QRious object in it.
Now in the next step create a new function named generateQR.
Now add the onClick method to the button element in the HTML file to call this function whenever the button is clicked

Now in the function named generateQR create 3 variable named textInput, backgroundColor, and foregroundColor i.e.

const textInput = document.querySelector(“#textInput”).value;
const backgroundColor = document.querySelector(“#backgroundColor”).value;
const foregroundColor = document.querySelector(“#foregroundColor”).value;

Use the above code lines to retrieve the value form the respective IDs and store it in those variable by using the querySelector.

Now in the next step introduce the qr.set() method.

The qr method is used to call the QRious library function and set the keyword used to update all properties of the QR code i.e.

value: textInput,
background: backgroundColor,
foreground: foregroundColor,

The properties i.e. value, background and foreground are the properties of the QRious object which is used to customize the QR code.

So the above represents that the values of the properties are being updated with the value stored in the variable which was declared earlier.

Output

Let us take an example by taking amazon a text input, blue as background color and red as foreground color

Color QR code generator using HTML, CSS and JS

The text to color QR code generator