How To Generate QR Code Using HTML CSS And JavaScript

What is a JavaScript QR code generator?

This is a library that permits you to make QR codes using JavaScript. QR codes are machine-readable codes comprising of an array of black and white squares utilized to store URLs or other information to be studied by a camera or a smartphone. You don’t need to depend on external APIs or domain names when using a JavaScript QR code in a web application.

These QR code JavaScript libraries, which are open source, give an API for creating QR codes with choices like size, color, and adjustment level to suit your requirements.

How to Create QR Code using HTML CSS and JavaScript

In this Blog, you will learn how to Generate QR code using HTML, CSS and JavaScript. In the earlier blog, I have shared How to Get user Current Location from Google Map API using JavaScript. and now it’s time to make a QR Code Generate in JavaScript.

QR (Fast Reaction) codes are able of storing lots of information, and users can easily get to the data by scanning the QR code. In my QR Code Generator app, users can enter a content or URL to generate a QR code for it. It is a QR code generator app, not a QR code scanner.

QR code API

You can generate and decode / read QR code graphics with our QR code generator web API at api.qrserver.com.

Example: https://api.qrserver.com/v1/create-qr-code/?size=150×150&data=Example

QR Code Generator in JavaScript (Source Code)

Create QR Code Generator in JavaScript. First, you need to create one bootstrap file that includes HTML,CSS and JavaScript. After create file just paste the given codes into your file.

First, Create an HTML file with the name index.html and paste the given codes into your HTML file. Remember, you have to create a file with .html extension.

index.html

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>How To Make Dynamic QR Code Using HTML CSS And JavaScript</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <style type="text/css">
        #qrBox{
            width: 200px;
            border-radius: 5px;
            max-height: 0;
            overflow: hidden;
            transition: max-height:1s;
        }
        #qrBox img{
            width: 100%;
            padding: 10px;
        }
        #qrBox.show-img{
            max-height: 300px;
            margin: 10px auto;
            border: 1px solid #d1d1d1;
        }
    </style>
<body>
    <div class="container card p-5 mt-5">
        <div class="py-5 text-center">
            <h2>How To Make Dynamic QR Code Using HTML CSS And JavaScript</h2>
        </div>
        <div class="container d-flex justify-content-center">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="qr">Enter your Text or URL</label>
                    <input type="text" id="qrText" class="form-control" placeholder="Enter QR Text" required>
                </div>
                <button onclick="generateQRCode()" class="btn btn-success">Generate QR Code</button>
                <div class="container d-flex justify-content-center">
                   <div id="qrBox">
                       <img src="" id="qrImage" >
                   </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">

        let qrText = document.getElementById('qrText');
        let qrBox = document.getElementById('qrBox');
        let qrImage = document.getElementById('qrImage');

        function generateQRCode(){
            if (qrText.value.length > 0) {
                qrImage.src = "https://api.qrserver.com/v1/create-qr-code/?size=250x250&data="+qrText.value;
                qrBox.classList.add('show-img');
            }
        }
    </script>
</body>
</html>
How To Generate QR Code Using HTML CSS And JavaScript

You can always support by sharing on social media or recommending my blog to your friends and colleagues.  If you have any suggestions or problems about this tutorial, please comment on the  form below.😊

Leave a Reply

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