How to Create a QR Code Generator – Easy HTML, CSS & JavaScript Tutorial

ttimesnow

Learn how to build your own QR code generator from scratch using HTML, CSS, and JavaScript. Customize colors, size, and error correction—full code included!

How to Create a QR Code Generator – Easy HTML, CSS & JavaScript Tutorial

Live

🔗 Live Preview

Iframe

Code :

The Bare Bones Structure

<div class="generator-container">
    <h1>My Personal QR Generator</h1>
    
    <div class="controls">
        <label>
            QR Content:
            <input type="text" id="qr-content" value="https://my-website.com">
        </label>
        
        <!-- More controls coming soon! -->
    </div>
    
    <div id="qr-display">
        <!-- The magic will appear here -->
    </div>
    
    <button id="download-btn">Save QR Code</button>
</div>

Script

// First, make sure the library is loaded
const QRCode = window.QRCode;

document.addEventListener('DOMContentLoaded', () => {
    const qrContent = document.getElementById('qr-content');
    const qrDisplay = document.getElementById('qr-display');
    
    function generateQR() {
        const text = qrContent.value.trim();
        
        if (!text) {
            qrDisplay.innerHTML = '<p>Type something first!</p>';
            return;
        }
        
        qrDisplay.innerHTML = ''; // Clear previous QR
        
        new QRCode(qrDisplay, {
            text: text,
            width: 200,
            height: 200,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });
    }
    
    // Generate immediately
    generateQR();
    
    // Update when typing
    qrContent.addEventListener('input', generateQR);
});

The basic version worked, but I wanted to make it mine. Here's what I added:

Size Control
Because sometimes you need a tiny QR code and sometimes you need a billboard-sized one.
Color Options
Default black-and-white is boring. I wanted neon pink if I felt like it.

<div class="controls">
    <!-- Previous input remains -->
    
    <label>
        Size: 
        <input type="range" id="qr-size" min="100" max="500" value="200">
    </label>
    
    <label>
        Color: 
        <input type="color" id="qr-color" value="#000000">
    </label>
    
    <label>
        Error Correction:
        <select id="qr-error-level">
            <option value="L">Low (7%)</option>
            <option value="M">Medium (15%)</option>
            <option value="Q">Quartile (25%)</option>
            <option value="H" selected>High (30%)</option>
        </select>
    </label>
</div>

The JavaScript updates:

const sizeInput = document.getElementById('qr-size');
const colorInput = document.getElementById('qr-color');
const errorLevelInput = document.getElementById('qr-error-level');

// Update the generateQR function
function generateQR() {
    // ... previous code ...
    
    new QRCode(qrDisplay, {
        text: text,
        width: sizeInput.value,
        height: sizeInput.value,
        colorDark: colorInput.value,
        colorLight: "#ffffff", // Keeping background white for now
        correctLevel: QRCode.CorrectLevel[errorLevelInput.value]
    });
}

// Add event listeners
sizeInput.addEventListener('input', generateQR);
colorInput.addEventListener('input', generateQR);
errorLevelInput.addEventListener('change', generateQR);

✅ Complete code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My QR Generator</title>
    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', sans-serif;
            background: #f5f5f5;
            padding: 20px;
        }
        .generator-container {
            max-width: 500px;
            margin: 0 auto;
            padding: 25px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 25px;
        }
        .controls {
            display: grid;
            gap: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }
        input, select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        #qr-display {
            min-height: 250px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px 0;
            border: 2px dashed #eee;
            padding: 10px;
        }
        #download-btn {
            width: 100%;
            padding: 10px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s;
        }
        #download-btn:hover {
            background: #45a049;
        }
    </style>
</head>
<body>
    <div class="generator-container">
        <h1>My Personal QR Generator</h1>
        
        <div class="controls">
            <label>
                QR Content:
                <input type="text" id="qr-content" value="https://my-website.com">
            </label>
            
            <label>
                Size: 
                <input type="range" id="qr-size" min="100" max="500" value="200">
            </label>
            
            <label>
                Color: 
                <input type="color" id="qr-color" value="#000000">
            </label>
            
            <label>
                Error Correction:
                <select id="qr-error-level">
                    <option value="L">Low (7%)</option>
                    <option value="M">Medium (15%)</option>
                    <option value="Q">Quartile (25%)</option>
                    <option value="H" selected>High (30%)</option>
                </select>
            </label>
        </div>
        
        <div id="qr-display"></div>
        
        <button id="download-btn">Save QR Code</button>
    </div>

    <script>
        const QRCode = window.QRCode;
        
        document.addEventListener('DOMContentLoaded', () => {
            const qrContent = document.getElementById('qr-content');
            const qrDisplay = document.getElementById('qr-display');
            const downloadBtn = document.getElementById('download-btn');
            const sizeInput = document.getElementById('qr-size');
            const colorInput = document.getElementById('qr-color');
            const errorLevelInput = document.getElementById('qr-error-level');
            
            function generateQR() {
                const text = qrContent.value.trim();
                
                if (!text) {
                    qrDisplay.innerHTML = '<p>Please enter some text first</p>';
                    return;
                }
                
                qrDisplay.innerHTML = '';
                
                new QRCode(qrDisplay, {
                    text: text,
                    width: sizeInput.value,
                    height: sizeInput.value,
                    colorDark: colorInput.value,
                    colorLight: "#ffffff",
                    correctLevel: QRCode.CorrectLevel[errorLevelInput.value]
                });
            }
            
            // Download functionality
            downloadBtn.addEventListener('click', () => {
                const canvas = qrDisplay.querySelector('canvas');
                if (!canvas) return;
                
                const link = document.createElement('a');
                link.download = 'my-qr-code.png';
                link.href = canvas.toDataURL();
                link.click();
            });
            
            // Initial generation
            generateQR();
            
            // Update on changes
            qrContent.addEventListener('input', generateQR);
            sizeInput.addEventListener('input', generateQR);
            colorInput.addEventListener('input', generateQR);
            errorLevelInput.addEventListener('change', generateQR);
        });
    </script>
</body>
</html>

Summary

Article Body

How to Create a QR Code Generator – Easy HTML, CSS & JavaScript Tutorial

Live

Iframe

The Bare Bones Structure

✅ Complete code