How to add QR Code in HTML?

Leave a Comment / CSS, HTML / By

In this post, you will learn about adding a QR code Generator in HTML. We will create QR codes in HTML with the help of HTML, CSS, and JQuery. Let’s start the process:-

 

If you don’t know about JQuery then Let us tell you about it in short. JQuery is an open-source JavaScript Library that is very fast and has rich features. It’s widely famous for write less, do more and it simplifies the interface between an HTML/CSS Document.

QR Code in HTML, CSS AND JQuery

A QR code generator is used to generate different types of QR codes which can be used to Open websites, Watch youtube, Scan Products, Connect to a wifi network, etc.

 

To create the QR code we will use Google Charts API, Then using JQuery, We will update the displayed QR code returned from google. Type any text or link in the Field and then press generate the new QR code will come. On scanning that QR code you will either go to that site or the entered text will come on your screen.

Index.html

<!DOCTYPE html>
<html>
    <head>  
        <title> QR Code Generator </title>
        <!–Style Sheet–>
        <style>
            body{
                text-align: center;
            }
            .qr-code {
                max-width: 300px;
                margin: 10px;
            }
            .control-label{
                font-size: 20px;
               
            }
            input{
                height: 25px;
                width: 500px;
            }
            button{
                width: 100px;
                height: 30px;
                border-style: solid;
            }
            button: hover{
                color : white;
                background-color: black;
                cursor: pointer;
            }
        </style>

 

    </head>
    <body>

 

        <img src= “https://chart.googleapis.com/chart?cht=qr&chl=Hello+World&chs=160×160&chld=L|0” class= “qr-code img” />
        <br>

 

        <label class= “control-label” for= “content”>
            Content:-
        </label>

 

        <input type= “text” placeholder= “Enter your Code” />
        <br> <br>

 

        <button type= “button” id= “generate”>
            Generate
        </button>

 

        <!–JQuery Script–>
        <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=160×160&chld=L|0′
                $(‘.qr-code’).attr(‘src’, finalURL);
            });
        });
        </script>

 

    </body>
</html>

OUTPUT

Hope this blog was helpful to you and you have got an answer to your question. Thank you for visiting our blog. If you have any doubts about any coding questions then let us know in the comments section we will answer them as soon as possible. Check out our more blog posts.

Recent Posts

Similar Posts

Leave a Comment

Your email address will not be published. Required fields are marked *