Building ZQR Forge: A QR Code Generator Web App

Introduction

QR codes are everywhere, from menus to marketing campaigns. They're a simple yet powerful way to share information instantly. To explore this technology and refine my JavaScript skills, I built ZQR Forge, a lightweight QR code generator designed for speed and simplicity.

In this post, I’ll walk you through the development of ZQR Forge, its features, and the underlying code. If you're curious, you can also check out the project on GitHub: ZQR Forge Repository.

Why Build ZQR Forge

The idea for ZQR Forge came from the need for a quick, reliable, and ad-free QR code generator. Online tools often add unnecessary complexity or branding, so I set out to create something lightweight with a clean design that’s easy to use.

Features of ZQR Forge

Here’s what ZQR Forge currently offers:

• Real-Time QR Code Generation: Type a URL or text, and the QR code updates instantly.
• Customizable Sizes: Choose from a variety of sizes (e.g., 100x100 to 1000x1000).
• Downloadable QR Codes: Save the generated QR code directly as a PNG file.
• Responsive and Modern Design: TailwindCSS ensures it looks great on any device.

Technologies Used

ZQR Forge uses simple yet powerful tools to deliver these features:

• HTML5 for structure.
• CSS3 (via TailwindCSS) for responsiveness and styling.
• Vanilla JavaScript for handling interactivity and generating QR codes.
• qrcode.js for generating QR codes.

How ZQR Forge Works

HTML Structure

The app consists of a form for user input and a result container for displaying the QR code. Here’s the basic structure:

<form id="qr-form">
  <input id="qr-input" type="url" placeholder="Enter your URL here" required />
  <select id="qr-size">
    <option value="100">100x100</option>
    <option value="500" selected>500x500</option>
    <option value="1000">1000x1000</option>
  </select>
  <button id="qr-button">Generate QR Code</button>
</form>
<div id="qr-result">
  <div id="qr-code"></div>
  <button id="download-btn" class="hidden">Download QR Code</button>
</div>

Styling with TailwindCSS

The app is styled with TailwindCSS for responsiveness and clean design. For example:

.container {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

button {
  transition: all 0.3s ease;
}

button:hover {
  transform: scale(1.05);
}

QR Code Generation with JavaScript

The main logic for generating QR codes is implemented in

script.js

1. Input Validation

The app ensures the user enters a valid URL before generating the QR code. If the input is invalid or empty, an error message is displayed:

if (!input.value) {
  message.textContent = 'Please enter a URL';
  input.classList.add('border-red-500');
  return;
}

1. Generating the QR Code

The

qrcode.js

code.innerHTML = ""; // Clear previous QR code
const qr = qrcode(0, 'M'); // Create a QR code instance
qr.addData(input.value);
qr.make();
const qrCode = qr.createImgTag(sizeValue, 4); // Generate QR code with cell size and margin
code.innerHTML = qrCode; // Append the generated QR code

1. Enabling the Download Option

Once the QR code is generated, the app makes the download button visible and allows users to save the QR code as a PNG file:

downloadBtn.classList.remove('hidden'); // Show the download button

Downloading the QR Code

To ensure the QR code is scannable when downloaded, the app uses

<canvas>

const canvas = document.createElement('canvas');
const padding = 40; // Add padding around the QR code
canvas.width = qrImage.naturalWidth + padding * 2;
canvas.height = qrImage.naturalHeight + padding * 2;

const ctx = canvas.getContext('2d');
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(qrImage, padding, padding, qrImage.naturalWidth, qrImage.naturalHeight);

canvas.toBlob((blob) => {
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'qr-code.png';
  link.click();
});

Challenges and Learnings

While building ZQR Forge, I encountered challenges such as handling invalid input, scaling QR codes dynamically while maintaining quality, and fine-tuning responsive design for smaller screens. These challenges helped me improve my JavaScript skills and learn more about integrating third-party libraries like qrcode.js.

Potential Future Improvements

Although ZQR Forge is functional, there are several enhancements I’d like to explore:

• Custom Colors: Allow users to change the colors of their QR codes.
• Add a Logo: Let users embed a small logo in the center of the QR code.
• QR Code History: Save previously generated QR codes for quick access.

Conclusion

ZQR Forge is a simple yet effective tool for generating QR codes instantly. It’s lightweight, responsive, and user-friendly, making it a great choice for anyone who needs QR codes without the clutter.

If you’d like to try it yourself or see the code, check it out on GitHub: ZQR Forge QR Code Generator.

Whether you're generating codes for personal use or to share information professionally, ZQR Forge has got you covered.