Text to QR Code Generator

Text to QR Code Generator | TechCraft

Text to QR Code Generator Tool Kaise Banayein? (HTML + JavaScript Full Tutorial)

Aaj ke is tutorial mein hum seekhenge ki kaise aap Text to QR Code Generator tool sirf ek simple HTML file ki madad se bana sakte hain. Yeh tool kisi bhi website ya blog mein embed kiya ja sakta hai, aur isse users apna QR code generate kar sakte hain — wo bhi bina kisi server ke.

Is Tool Ki Kya Zarurat Hai?

QR Code aaj kal har jagah use hota hai — payment se lekar login system tak. Agar aap apne blog visitors ko ek simple QR code banane ka option dena chahte hain, to yeh tool unke liye kaafi helpful ho sakta hai.

Tool Ki Main Features:

  • Live QR code generation based on text
  • Offline kaam karta hai (No internet required)
  • Copy/paste friendly design
  • Lightweight aur fast loading

💻 Full HTML + JavaScript Code 👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text to QR Code Generator</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f9fbe7;
    }
    h2 {
      color: #4caf50;
    }
    textarea {
      width: 100%;
      height: 100px;
      padding: 10px;
      font-size: 16px;
    }
    button {
      background: #4caf50;
      color: white;
      padding: 10px 20px;
      border: none;
      margin-top: 10px;
      cursor: pointer;
      font-size: 16px;
    }
    canvas {
      margin-top: 20px;
    }
  </style>
</head>
<body>

  <h2>Text to QR Code Generator</h2>
  <textarea id="text-input" placeholder="Enter text to generate QR code"></textarea>
  <br/>
  <button onclick="generateQR()">Generate QR Code</button>
  <br/>
  <canvas id="qr-code"></canvas>

  <script>
    const qr = new QRious({
      element: document.getElementById('qr-code'),
      size: 250,
    });

    function generateQR() {
      const input = document.getElementById('text-input').value;
      qr.value = input;
    }
  </script>

</body>
</html>

Is Code Ko Kaise Use Karein?

  1. Code ko copy karein
  2. Notepad ya VS Code mein paste karein
  3. File ko qr.html naam se save karein
  4. Browser mein open karke tool use karein

Kya Seekhne Ko Milega?

  • CDN se JavaScript library kaise use hoti hai
  • Canvas ke through QR generate karna
  • Textarea aur button ka interactive use
  • Apne blog ke liye useful tool banana

AdSense Friendly Content

Yeh tool sirf user experience badhata hai aur kisi bhi AdSense policy ka violation nahi karta. Agar aapka blog development se related hai to yeh post AdSense approval mein bhi madadgar ho sakta hai.

Extra Tips:

  • App mein QR ko download karne ka feature bhi add kar sakte hain
  • Dark mode layout ke liye CSS tweak karein
  • Tool ko Blogger, WordPress ya GitHub Pages par host karein

Video Guide

Agar aap video ke zariye seekhna pasand karte hain to maine is topic par ek video tutorial bhi banaya hai. Jisme maine step-by-step bataya hai ki is code ko kaise kaam mein lein.

Conclusion

Toh dosto, is tarah aap ek simple sa Text to QR Code Generator apni website ke liye bana sakte hain. Yeh tool user-friendly hai, fast hai, aur blogging ke liye perfect addition hai.

Agar aapko yeh post pasand aayi ho to comment karein, apne doston ke sath share karein, aur naye tutorials ke liye hamare blog ko follow karein. 🙏