Générateur de codes QR HTML, JavaScript

21 codex

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

6 October 2025

Extrait de code d'animation CSS Maze

6 November 2024

Code d'icône sociale en 3D

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>

Générateur de codes QR HTML, JavaScript

Recommandé

Extrait de code d'animation CSS Maze

Effet de texte 3D

Code d'icône sociale en 3D

HTML

CSS

JS

Recommandé

Extrait de code d'animation CSS Maze

Effet de texte 3D

Code d'icône sociale en 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS