How To Make A QR Code Generator Using JavaScript

bySakib Mahmud -June 23, 2021

0

What is a QR code?

A QR code is a barcode that can be used to encrypt various information and be scan it from different devices to decrypt the information. A user can easily scan the QR code with his device and extract the information from it very easily. It is very easy to use a QR code for a normal user so the use of QR code is much more in every case.

How a QR code generator works?

The geometric symbols in the QR code basically indicate different letters, numbers, symbols. A QR code scanner can easily find different information according to the location and shape of the symbols and shows the decrypted information to the user. A QR-code-generator can easily recognize different letters, numbers, symbols. According to that, it places different geometric shapes in different positions following different mathematical rules.

Source Code

Basically, you only need HTML, CSS, and JavaScript to create it. Here we are going to use some jquery to create this tool. All the codes are given below. You can copy and paste them into your code editor to create this tool.

HTML code for the QR code generator

<!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"><title>Document</title></head><body><div class="well"><div style="text-align: center;"> <img src="" class="qr-code img-thumbnail" /></div><div><div><div style="text-align: center;"><p> <label>Content:</label> <input type="text" size="60" maxlength="60" class="form-control" id="content" placeholder="Enter content" /></p></div></div><div><div style="text-align: center;"> <button type="button" class="button button1" id="generate"> Generate </button></div></div></div></div></body></html>

CSS code for the QR code generator

    <style>
        .qr-code {
            max-width: 200px;
            margin: 10px;
        }

        .img-thumbnail {
            display: inline-block;
            max-width: 100%;
            height: auto;
            padding: 4px;
            line-height: 1.42857143;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            -webkit-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out
        }

        .well {
            min-height: 20px;
            padding: 19px;
            margin-bottom: 20px;
            background-color: #f5f5f5;
            border: 1px solid #e3e3e3;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05)
        }
        input[type=text],
    select,
    textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical;
        outline: none;
    }
    .button {
        background-color: #4CAF50;
        /* Green */
        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        transition-duration: 0.4s;
        cursor: pointer;
        text-align: center;
    }

    .button1 {
        background-color: #f44336;
        color: white;
        border-radius: 20px;
        margin-bottom: 25px;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .button1:hover {
        background-color: #008CBA;
        color: white;
    }
    </style>

JavaScript code for the QR code generator

    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script>
        function htmlEncode(value) {
            return $('<div/>').text(value)
                .html();
        }
        $(function () {
            $('#generate').click(function () {
                let finalURL =
                    'https://chart.googleapis.com/chart?cht=qr&chl=' +
                    htmlEncode($('#content').val()) +
                    '&chs=160x160&chld=L|0'
                $('.qr-code').attr('src', finalURL);
            });
        });
    </script>

Using this code you can make your QR code generator very easily. You can add more functionality like one-click download, edit, custom logo integration, auto-sizing, and many more. Remember to explore more interesting JavaScript projects like this one. We have a delegated section for JavaScript projects. Find all of them in the topic section.

Tags: JavaScript