QR Code Generator 🚀

Welcome to this comprehensive guide! Today, we are diving into the world of QR Codes. Once considered a "relic" of the past, QR codes have made a massive comeback in the post-pandemic era. From touchless restaurant menus to instant Wi-Fi access, they are the ultimate bridge between the physical and digital worlds. 🌐

Why Build Your Own? 🤔

You might wonder, "Why not just use a free online generator?" Well, many free tools out there add unwanted redirects, track your users, or even expire your codes after a few days. By building your own using HTML, CSS, and JavaScript, you maintain full control, privacy, and zero costs! 💸

The Structure (HTML) 🏗️

We need an input field for the user to type their data, a button to trigger the generation, and a container where the QR code will be rendered.

<input type="text" id="qr-input" placeholder="Type something...">
<button onclick="generateQR()">Generate</button>
<div id="qrcode"></div>

The Logic (JavaScript) 🧠

We use the QRCode.js library to handle the complex encoding. The library takes our string and converts it into a grid of black and white modules.

Here is the JavaScript function that makes it happen:

function generateQR() {
    let data = document.getElementById("qr-input").value;
    let container = document.getElementById("qrcode");

    container.innerHTML = ""; // Clear previous QR

    if (data.trim() !== "") {
        new QRCode(container, {
            text: data,
            width: 180,
            height: 180
        });
    } else {
        alert("Please enter some text!");
    }
}

Conclusion 🏁

And that's it! You've successfully created a functional tool that can be integrated into any web project. Whether you want to share your portfolio link or create dynamic event tickets, the power is now in your hands. 🛠️