Open In App

Build a QR Code Generator Web App

Improve
Improve
Like Article
Like
Save
Share
Report

A quick response code or QR code is a type of barcode in the form of a matrix. These are machine-readable optical labels that contain pieces of information about the items attached to them. In this article, we will be creating our own QR code generator from scratch using HTML, CSS, and JavaScript. We will try to generate a QR code by giving text input. The input can be plain text or a URL. We will take the help of create-qr-code API for generating a readable QR code. 

Form Structure for taking input: It will be a simple form that will contain an input field for taking text input from the user and a button to generate the QR code. On clicking the button the form will be submitted. The form with the mentioned fields would roughly look like this:

<form onsubmit="handleSubmit(event)">
    <input type="text">
            <button type="submit">
                   Generate QR
               </button>
</form>

Creating the frontend interface for an app: The frontend will contain a form and a field for showing the generated QR code. As discussed above, the form will have a text field and a submit button. Upon submitting the form with the input field the generated QR will be shown with the help of an image just below the form. Since the qr code will be generated with the help of JavaScript, we will keep the src attribute of the image tag initially empty. All these components will be wrapped into a div which will facilitate a container.

index.html:

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width,
                         initial-scale=1.0">
    <link rel="stylesheet"
          href="styles.css">
    <title>QR-Reader</title>
</head>
 
<body>
    <div class="container">
        <form onsubmit="handleSubmit(event)">
            <input id="inptxt"
                   type="text"
                   autocomplete="off">
            <br>
            <button type="submit">
                Generate QR
            </button>
        </form>
        <div class="img-div">
            <img id="qrimg" />
        </div>
    </div>
 
    <script src="index.js"></script>
</body>
 
</html>


Output:

 

Add some Style using CSS: The generated frontend looks really simple as of now. Let us add some styling to the HTML code to make our frontend look good. Add style mainly to the form and beautify the button. We will be using a gradient color to give a greenish look to the button. Also, increase the width of the input box and keep the font size from 16px to 18px.

styles.css:

CSS




* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
.container {
    text-align: center;
}
 
form {
    margin-top: 30vh;
    text-align: center;
}
 
form input {
    width: 400px;
    height: 50px;
    padding: 10px;
    font-size: 18px;
    font-family: Arial;
}
 
form button {
    margin: 0;
    color: #fff;
    background-image: linear-gradient(180deg, #2bbe60, #0f9d58);
    border: none;
    width: 400px;
    height: 40px;
    outline: none;
    cursor: pointer;
    font-size: 16px;
}
 
.img-div {
    margin-top: 100px;
}


Final frontend with style: After adding the CSS to the frontend the UI will look really good as below:

 

Handling the form data and generating QR codes using API: Now, we have made a simple yet beautiful frontend that takes input text from the user. But, we need to handle the input text to do something with the input data. For this purpose, we need to use JavaScript. Create an index.js file for handling the form data and generating the QR code using the API. The first task is to get hold of the input text with the help of the following code:

let text = document.getElementById("inptxt").value;

Now, the input text is stored inside the text variable. Send this data to the API endpoint to receive the generated QR code. The API will return an image in response. We will use the URL of the image to set the src of the <img> tag using JavaScript that we had kept empty initially. The API endpoint looks like this:

http://api.qrserver.com/v1/create-qr-code/?data=${text}

On submitting the form, the handleSubmit() will be triggered which will perform the above tasks in order to generate the QR code and then display it to the frontend using JavaScript from index.js.

index.js:

Javascript




function handleSubmit(event) {
    event.preventDefault();
    let text = document.getElementById("inptxt").value;
    let qrsrc =
        `http://api.qrserver.com/v1/create-qr-code/?data=${text}`;
    let qrimg = document.getElementById("qrimg");
    qrimg.src = qrsrc;
}


Example: This example describes the generation of a QR code with the help of calling the API that will create the QR code.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width,
                         initial-scale=1.0">
    <link rel="stylesheet"
          href="styles.css">
    <title>QR-Reader</title>
</head>
 
<body>
    <div class="container">
        <form onsubmit="handleSubmit(event)">
            <input id="inptxt"
                   type="text"
                   autocomplete="off">
            <br>
            <button type="submit">
                Generate QR
            </button>
        </form>
        <div class="img-div">
            <img id="qrimg" />
        </div>
    </div>
 
    <script src="index.js"></script>
</body>
 
</html>


CSS




* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
.container {
    text-align: center;
}
 
form {
    margin-top: 30vh;
    text-align: center;
}
 
form input {
    width: 400px;
    height: 50px;
    padding: 10px;
    font-size: 18px;
    font-family: Arial;
}
 
form button {
    margin: 0;
    color: #fff;
    background-image: linear-gradient(180deg, #2bbe60, #0f9d58);
    border: none;
    width: 400px;
    height: 40px;
    outline: none;
    cursor: pointer;
    font-size: 16px;
}
 
.img-div {
    margin-top: 100px;
}


Javascript




function handleSubmit(event) {
    event.preventDefault();
    let text = document.getElementById("inptxt").value;
    let qrsrc =
        `http://api.qrserver.com/v1/create-qr-code/?data=${text}`;
    let qrimg = document.getElementById("qrimg");
    qrimg.src = qrsrc;
}


Output:

 



Last Updated : 22 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads