क्यूआर कोड जनरेटर एचटीएमएल, जावास्क्रिप्ट

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

12 December 2025

HTML बटन कोड उदाहरण

HTML

<!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>

क्यूआर कोड जनरेटर एचटीएमएल, जावास्क्रिप्ट

अनुशंसित

एग्गी कार HTML5 गेम सोर्स कोड

स्काईरियम द्वारा एक कोड

HTML बटन कोड उदाहरण

HTML

CSS

JS

अनुशंसित

एग्गी कार HTML5 गेम सोर्स कोड

स्काईरियम द्वारा एक कोड

HTML बटन कोड उदाहरण

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS