Generador de códigos QR HTML, JavaScript

572 codex

Abrir en el editor Publica tu código

Generador de códigos QR HTML, JavaScript

Recomendado

13 June 2025

Un código de Metehan

17 July 2025

Formulario de registro de inicio de sesión giratorio 3D HTML CSS

6 December 2024

Página de inicio - Música

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>

CSS