QR codes are everywhere these days — menus, payments, websites, even job applications. So I thought: why not build a quick and clean QR code generator myself? And that’s exactly what I did with just HTML, CSS, and a bit of vanilla JavaScript. 🔥

Here’s a quick look at the finished app:

QR Code Generator Screenshot

🚀 What It Does

This QR code generator lets users input any text or URL and instantly generates a scannable QR code. You can then download it as a PNG image, or clear and generate a new one — simple as that.

Whether you want to generate a code for your portfolio site, a Wi-Fi password, or just for fun, this tool has you covered.

⚙️ Key Features

  • ✅ Live QR code generation via GoQR API
  • 🖼 Smooth QR preview with animation
  • 💾 One-click download button
  • 🧹 Clear/reset functionality
  • ⚠️ Error handling for empty or oversized input
  • 📱 Fully responsive and styled with a clean modern UI using Poppins font

Another screenshot showing the QR code + download button in action:

QR Code Generator Screenshot 2

🧩 Tech Stack

  • HTML5 for structure
  • CSS3 for styling and responsive layout
  • JavaScript (Vanilla) for logic, API calls, and DOM manipulation
  • GoQR.me API for generating QR codes

🧠 Code Walkthrough (Quick Highlights)

Here’s how it works behind the scenes:

1. Input and Validation 

const inputValue = qrText.value.trim();
if (!inputValue) {
  showError("Please enter a value to generate a QR code.");
  return;
}

Checks for empty input or overly long content, ensuring smooth UX and preventing broken QR codes.

2. Generating the QR 

const qrCodeURL = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(inputValue)}`;
qrCode.src = qrCodeURL;

A simple GET request to the GoQR API with the user’s input embedded in the URL. No need for complex libraries!

3. Downloading the Image 

const link = document.createElement("a");
link.href = qrCode.src;
link.download = `QRCode_${Date.now()}.png`;
link.click();

Just dynamically create an tag and trigger a click — clean and effective.

📁 See the Code on GitHub

All the source files (HTML, CSS, JS) are up on GitHub as part of my "30 JavaScript Projects in 30 Days" challenge:

👉 GitHub Repo – QR Code Generator

If you like it, give it a ⭐ and feel free to fork it or contribute!

💬 Final Thoughts

This was a fun, beginner-friendly mini project that’s both practical and rewarding. I learned how to:

  • Work with third-party APIs
  • Dynamically update the DOM
  • Handle file downloads in the browser
  • Add subtle UX improvements with CSS animations and transitions

Next up in the series: something a little more interactive... 👀

Thanks for reading! Let me know if you build your own version, or if you have ideas to improve this one 🙌