HTML İle QR Kod Oluşturma Sayfası

HTML İle QR Kod Oluşturma Sayfası By: Kerem Date: 13 Aralık 2023, 22:27:41
Basit bir şekilde anlatmak gerekirse aşağıda vereceğim HTML sayfası ile elinizdeki URL yi girerek QR kod oluşturabilirsiniz. QR kod taratıldığında da girmiş olduğunuz URL yi görebilirsiniz.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Kod Oluşturucu</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 20px;
        }

        h1 {
            color: #333;
        }

        label {
            display: block;
            margin-top: 10px;
        }

        input {
            width: 300px;
            padding: 8px;
        }

        button {
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }

        #qrcode {
            margin-top: 20px;
        }
    </style>
    <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
</head>
<body>

    <h1>QR Kod Oluşturucu</h1>

    <label for="urlInput">URL:</label>
    <input type="text" id="urlInput" placeholder="URL girin">

    <button onclick="generateQR()">Oluştur</button>

    <div id="qrcode"></div>

    <script>
        function generateQR() {
            var urlInput = document.getElementById("urlInput").value;
            var qrcode = new QRCode(document.getElementById("qrcode"), {
                text: urlInput,
                width: 128,
                height: 128
            });
        }
    </script>

</body>
</html>

Örnek Görsel:
Screenshot_2023-12-14-00-30-32-051_com.android.chrome-edit.jpg