Gerador de código QR em HTML e JavaScript

13 codex

Abrir no Editor Video Publique Seu Código

Gerador de código QR em HTML e JavaScript

Recomendado

2 November 2025

Botão animado em CSS com efeito de ondulação

10 January 2026

Botão CSS Glassmorphism com animação de brilho

22 October 2025

Modelo HTML de cartões de link para mídia social

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>

Recomendado

Botão animado em CSS com efeito de ondulação

Botão CSS Glassmorphism com animação de brilho

Modelo HTML de cartões de link para mídia social

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS