QR Code Generator

Standalone, zero-dependency JavaScript implementation powering this tool. Free to inspect, copy, and build upon.

let currentTab = 'url';
  let qrSize = 300;
  let ecLevel = 'M';
  let fgColor = '#000000';
  let bgColor = '#ffffff';
  let qrInstance = null;
  let debounceTimer = null;

  // Tabs
  document.querySelectorAll('.tab').forEach(t => {
    t.addEventListener('click', () => {
      document.querySelectorAll('.tab').forEach(x => x.classList.remove('active'));
      document.querySelectorAll('.tab-panel').forEach(x => x.classList.add('hidden'));
      t.classList.add('active');
      currentTab = t.dataset.tab;
      document.getElementById(`tab-${currentTab}`).classList.remove('hidden');
      scheduleGenerate();
    });
  });

  // Size buttons
  document.querySelectorAll('[data-size]').forEach(b => {
    b.addEventListener('click', () => {
      document.querySelectorAll('[data-size]').forEach(x => x.classList.remove('active'));
      b.classList.add('active');
      qrSize = parseInt(b.dataset.size);
      scheduleGenerate();
    });
  });

  // EC buttons
  document.querySelectorAll('[data-ec]').forEach(b => {
    b.addEventListener('click', () => {
      document.querySelectorAll('[data-ec]').forEach(x => x.classList.remove('active'));
      b.classList.add('active');
      ecLevel = b.dataset.ec;
      scheduleGenerate();
    });
  });

  document.getElementById('fgColor').addEventListener('input', e => { fgColor = e.target.value; scheduleGenerate(); });
  document.getElementById('bgColor').addEventListener('input', e => { bgColor = e.target.value; scheduleGenerate(); });

  // All inputs
  ['urlInput','textInput','emailAddr','emailSubject','emailBody','phoneInput','wifiSSID','wifiPass','wifiEnc'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.addEventListener('input', scheduleGenerate);
    if (el && el.tagName === 'SELECT') el.addEventListener('change', scheduleGenerate);
  });

  function scheduleGenerate() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(generateQR, 200);
  }

  function buildContent() {
    switch(currentTab) {
      case 'url': return document.getElementById('urlInput').value.trim() || null;
      case 'text': return document.getElementById('textInput').value.trim() || null;
      case 'email': {
        const addr = document.getElementById('emailAddr').value.trim();
        if (!addr) return null;
        const subj = encodeURIComponent(document.getElementById('emailSubject').value.trim());
        const body = encodeURIComponent(document.getElementById('emailBody').value.trim());
        return `mailto:${addr}${subj || body ? '?' : ''}${subj ? 'subject=' + subj : ''}${subj && body ? '&' : ''}${body ? 'body=' + body : ''}`;
      }
      case 'phone': {
        const p = document.getElementById('phoneInput').value.trim();
        return p ? `tel:${p}` : null;
      }
      case 'wifi': {
        const ssid = document.getElementById('wifiSSID').value.trim();
        if (!ssid) return null;
        const pass = document.getElementById('wifiPass').value;
        const enc = document.getElementById('wifiEnc').value;
        return `WIFI:T:${enc};S:${ssid};P:${pass};;`;
      }
    }
    return null;
  }

  const ecMap = { L: QRCode.CorrectLevel.L, M: QRCode.CorrectLevel.M, Q: QRCode.CorrectLevel.Q, H: QRCode.CorrectLevel.H };

  function generateQR() {
    const content = buildContent();
    const container = document.getElementById('qrContainer');
    const placeholder = document.getElementById('qrPlaceholder');

    if (!content) {
      container.innerHTML = '';
      container.appendChild(placeholder);
      placeholder.style.display = 'flex';
      qrInstance = null;
      return;
    }

    placeholder.style.display = 'none';
    container.innerHTML = '';
    container.style.padding = '16px';

    try {
      qrInstance = new QRCode(container, {
        text: content,
        width: qrSize,
        height: qrSize,
        colorDark: fgColor,
        colorLight: bgColor,
        correctLevel: ecMap[ecLevel] || QRCode.CorrectLevel.M
      });
    } catch(e) {
      container.innerHTML = `<div style="color:#cc0000;font-size:12px;padding:20px;">Content too long for this error correction level. Try L or M.</div>`;
    }
  }

  document.getElementById('downloadBtn').addEventListener('click', () => {
    const canvas = document.querySelector('#qrContainer canvas');
    if (!canvas) return;
    const link = document.createElement('a');
    link.download = 'qrcode.png';
    link.href = canvas.toDataURL('image/png');
    link.click();
  });

  // Init with placeholder visible
  document.getElementById('urlInput').focus();