Skip to content

QR CODE Generator

QR Code Generator

QR Code Generator

<!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: 50px;
        }
        input, select {
            width: 300px;
            padding: 10px;
            margin: 10px;
        }
        button {
            padding: 10px 20px;
            cursor: pointer;
        }
        #qrcode {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h2>QR Code Generator</h2>
    <select id="qrType">
        <option value="text">Text/URL</option>
        <option value="website">Website</option>
        <option value="contact">Contact (vCard)</option>
        <option value="email">Email</option>
        <option value="phone">Phone Number</option>
        <option value="sms">SMS</option>
        <option value="wifi">WiFi</option>
    </select>
    <input type="text" id="text" placeholder="Enter details">
    <select id="color">
        <option value="#FFFFFF">White</option>
        <option value="#FFCCCC">Light Red</option>
        <option value="#CCFFCC">Light Green</option>
        <option value="#CCCCFF">Light Blue</option>
        <option value="#FFFFCC">Light Yellow</option>
        <option value="#FFCCFF">Light Magenta</option>
        <option value="#CCFFFF">Light Cyan</option>
        <option value="#F0E68C">Khaki</option>
        <option value="#E6E6FA">Lavender</option>
        <option value="#D3D3D3">Light Gray</option>
    </select>
    <button onclick="generateQRCode()">Generate QR Code</button>
    <div id="qrcode"></div>
    <button id="download" style="display:none;" onclick="downloadQRCode()">Download QR Code</button>

    <script>
        function generateQRCode() {
            var type = document.getElementById("qrType").value;
            var text = document.getElementById("text").value.trim();
            var bgColor = document.getElementById("color").value;
            document.getElementById("qrcode").innerHTML = ""; // Clear previous QR Code
            
            if (!text) {
                alert("Please enter valid details");
                return;
            }
            
            let qrContent = "";
            
            switch (type) {
                case "text":
                case "website":
                    qrContent = text;
                    break;
                case "contact":
                    qrContent = `BEGIN:VCARD\nVERSION:3.0\nFN:${text}\nEND:VCARD`;
                    break;
                case "email":
                    qrContent = `mailto:${text}`;
                    break;
                case "phone":
                    qrContent = `tel:${text}`;
                    break;
                case "sms":
                    qrContent = `sms:${text}`;
                    break;
                case "wifi":
                    qrContent = `WIFI:S:${text};T:WPA;P:yourpassword;;`;
                    break;
                default:
                    alert("Invalid QR type");
                    return;
            }
            
            new QRCode(document.getElementById("qrcode"), {
                text: qrContent,
                width: 200,
                height: 200,
                colorDark: "#000000", // QR code always in black
                colorLight: bgColor // Background color changes
            });
            
            setTimeout(() => {
                document.getElementById("download").style.display = "block";
            }, 500);
        }

        function downloadQRCode() {
            var qrCanvas = document.querySelector("#qrcode canvas");
            if (qrCanvas) {
                var img = qrCanvas.toDataURL("image/png");
                var link = document.createElement("a");
                link.href = img;
                link.download = "qrcode.png";
                link.click();
            }
        }
    </script>
</body>
</html>