QR Code Generator Script and Guide - Favorite Web

Usage Guide

এই Code গুলো ব্যাবহার করে Advance Single এবং Bulk QR কোড তৈরী করা একদম সহজ with Custom Title. কারণ নিচের Code গুলো আপনার পোস্ট/পেইজে Copy করে Past করলে‘ই আপনার QR Code Generator Tools Ready. এরপর শুধু Title থেকে নাম পরিবর্তন এবং JS Code থেকে Zip এর নাম পরিবর্তন করলেই নিজস্ব Branding এ আপনার QR Code Generator Tools সম্পূর্ণ প্রস্তুত।

HTML Code

<div class="qrcontainer">
  <h2>Favorite Web QR Generator</h2>

  <textarea id="bulk" placeholder="Favorite-Web https://favoriteweb.net" 
  style="width:100%;height:120px;padding:10px;"></textarea>

  <br><br>

  <input type="file" id="csvFile" accept=".csv">

  <br><br>

  <button onclick="generateQRs()" style="padding:10px 20px;">Generate QR</button>
  <button onclick="downloadZip()" style="padding:10px 20px;">Download</button>
  <div id="errorMsg" style="display:none;background:#ef4444;color:#fff;padding:10px;border-radius:8px;margin-top:10px;"></div>
  <div id="output" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:20px;"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>

CSS Code

<style>
/* Container */
.qrcontainer {
  max-width: 900px;
  margin: auto;
  padding: 20px;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #fff;
}

/* Glass Card */
.qrcontainer .card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 20px;
  margin-top: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Title */
.qrcontainer h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

/* Textarea */
.qrcontainer textarea {
  width: 100%;
  height: 130px;
  padding: 12px;
  border-radius: 12px;
  border: none;
  outline: none;
  background: rgba(255,255,255,0.08);
  color: #fff;
}

/* File Input */
.qrcontainer input[type="file"] {
  margin-top: 10px;
  color: #fff;
}

/* Buttons */
.qrcontainer button {
  background: linear-gradient(135deg, #6366f1, #22c55e);
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 10px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.qrcontainer button:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}

/* QR Grid */
.qrcontainer #output {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

/* QR Card */
.qrcontainer #output div {
  background: rgba(255,255,255,0.06);
  padding: 10px;
  border-radius: 15px;
  text-align: center;
  transition: 0.3s;
}

.qrcontainer #output div:hover {
  transform: translateY(-5px);
}

/* QR Name */
.qrcontainer #output p {
  font-size: 12px;
  margin-top: 5px;
  word-break: break-word;
}
.qrcontainer #errorMsg {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  font-weight: 500;
  text-align: center;
}
</style>

JS Code

<script>
let qrData = [];
let nameCount = {};

function getUniqueName(name){
  if(nameCount[name]){
    nameCount[name]++;
    return name + "-" + nameCount[name];
  }else{
    nameCount[name] = 1;
    return name;
  }
}

// ✅ URL থেকে নাম বের করবে
function extractName(line){

  const urlMatch = line.match(/https?:\/\/[^\s]+/);

  if(!urlMatch) return "qr-code";

  const url = urlMatch[0];

  // URL বাদ দিয়ে name বের করা
  let name = line.replace(url, "").trim();

  // যদি কিছু না থাকে → domain থেকে নাম
  if(name.length === 0){
    try{
      let domain = new URL(url).hostname.replace("www.","");
      name = domain.split(".")[0];
    }catch{
      name = "qr-code";
    }
  }

  // 🔥 clean name (FIXED)
  name = name
    .replace(/[<>:"/\\|?*]+/g, "")
    .replace(/\s+/g, "-");

  if(name === "" || name === "-"){
    name = "qr-code";
  }

  return name;
}

async function generateQRs(){

  qrData = [];
  nameCount = {}; // 🔥 reset duplicate counter

  const errorBox = document.getElementById("errorMsg");
  const textArea = document.getElementById("bulk").value;

  const output = document.getElementById("output");
  output.innerHTML = "";

  if(errorBox){
    errorBox.style.display = "none";
  }

  const lines = textArea
    .replace(/,/g, "\n")
    .split(/\r?\n+/)
    .map(l => l.trim())
    .filter(Boolean);

  if(lines.length === 0){
    showError("⚠️ Please enter at least one valid URL!");
    return;
  }

  let validCount = 0;
  let invalidCount = 0;

  for(let line of lines){

    const urlMatch = line.match(/https?:\/\/[^\s]+/);

    if(!urlMatch){
      invalidCount++;
      continue;
    }

    try{

      // ✅ name extract + unique FIX
      let name = extractName(line);
      let uniqueName = getUniqueName(name);

      let canvas = document.createElement("canvas");

      await QRCode.toCanvas(canvas, line, {
        margin: 1,
        width: 200
      });

      // ✅ FIXED push
      qrData.push({canvas, name: uniqueName});
      validCount++;

      let div = document.createElement("div");
      div.appendChild(canvas);

      let p = document.createElement("p");
      p.innerText = uniqueName; // ✅ FIXED
      div.appendChild(p);

      output.appendChild(div);

    }catch(e){
      invalidCount++;
    }
  }

  if(validCount === 0){
    showError("❌ No valid URLs found!");
    return;
  }

  if(invalidCount > 0){
    showError(`⚠️ ${invalidCount} invalid input ignored!`, "warning");
  }
}

// ✅ error function
function showError(msg, type="error"){
  const box = document.getElementById("errorMsg");
  if(!box) return;

  box.innerText = msg;
  box.style.display = "block";

  if(type === "warning"){
    box.style.background = "#f59e0b";
  } else {
    box.style.background = "#ef4444";
  }
}

// ✅ CSV upload (unchanged)
document.getElementById("csvFile").addEventListener("change", async function(e){
  const file = e.target.files[0];
  if(!file) return;

  const text = await file.text();

  const lines = text.split(/\r?\n/).map(l => l.trim()).filter(Boolean);

  const dataLines = lines.slice(1);

  let formatted = "";

  for(let line of dataLines){
    const parts = line.split(",");

    if(parts.length < 2) continue;

    const name = parts[0].trim();
    const url = parts[1].trim();

    if(!url) continue;

    formatted += `${name} ${url}\n`;
  }

  document.getElementById("bulk").value = formatted;
});

// ✅ download
async function downloadZip(){

  if(qrData.length === 1){
    const item = qrData[0];

    const link = document.createElement("a");
    link.href = item.canvas.toDataURL("image/png");
    link.download = item.name + ".png";
    link.click();

    return;
  }

  if(qrData.length > 1){
    const zip = new JSZip();

    for(let item of qrData){
      const dataUrl = item.canvas.toDataURL("image/png");
      const base64 = dataUrl.split(",")[1];

      zip.file(item.name + ".png", base64, {base64:true});
    }

    const blob = await zip.generateAsync({type:"blob"});

    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = "favorite-web-qr.zip";
    link.click();
  }

  if(qrData.length === 0){
    alert("Please generate QR first!");
  }
}
</script>