How to make a JavaScript QR Code generator

Here’s an HTML + JavaScript web app that generates a QR code inside an HTML <canvas> element based on user input. It uses the qrcode.js library to generate the QR code efficiently.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Code Generator</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 20px;
        }
        #qrcode {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h2>QR Code Generator</h2>
    <input type="text" id="text-input" placeholder="Enter text or URL" />
    <button onclick="generateQRCode()">Generate QR Code</button>
    <div id="qrcode"></div>

    <script>
        function generateQRCode() {
            var text = document.getElementById("text-input").value;
            document.getElementById("qrcode").innerHTML = ""; // Clear previous QR code
            if (text) {
                new QRCode(document.getElementById("qrcode"), {
                    text: text,
                    width: 200,
                    height: 200
                });
            } else {
                alert("Please enter some text or URL");
            }
        }
    </script>
</body>
</html>

Post Views: 208