QR Code Generator HTML, JavaScript

Open In Editor Video Publish Your Code

<!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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f2f5;
        }
        .card {
            background: white;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            text-align: center;
            width: 100%;
            max-width: 400px;
        }
        h1 {
            color: #333;
            margin-bottom: 1.5rem;
        }
        input {
            width: 100%;
            padding: 12px;
            margin-bottom: 1rem;
            border: 2px solid #ddd;
            border-radius: 6px;
            box-sizing: border-box;
            font-size: 16px;
            outline: none;
            transition: border-color 0.3s;
        }
        input:focus {
            border-color: #007bff;
        }
        button {
            width: 100%;
            padding: 12px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #0056b3;
        }
        #qrcode {
            margin-top: 2rem;
            display: flex;
            justify-content: center;
        }
        #qrcode img {
            border: 10px solid #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>

<div class="card">
    <h1>QR Generator</h1>
    <input type="text" id="qr-input" placeholder="Enter text or URL" value="https://example.com">
    <button onclick="generateQR()">Generate Code</button>
    <div id="qrcode"></div>
</div>

function generateQR() {
        const input = document.getElementById("qr-input");
        if (input.value.trim() === "") {
            alert("Please enter some text or a URL");
            return;
        }
        qrcode.makeCode(input.value);
    }

// Generate initial QR on load
    generateQR();
</script>

</body>
</html>

QR Code Generator HTML, JavaScript

Recommended

CSS Heart Animation Code Snippet

Five Nights at Diddy's HTML Game Code

CSS Animation Code Block Example

HTML

CSS

JS

Recommended

CSS Heart Animation Code Snippet

Five Nights at Diddy's HTML Game Code

CSS Animation Code Block Example

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS