⚡ How I Built QRify: A Temporary QR Code Generator with JavaScript

Recently, I built QRify, a lightweight QR code generator that creates QR codes from text or URLs and automatically clears them after 30 seconds.

🔗 Live Demo: https://suprio-dev.github.io/QRify/

💻 GitHub Repository: https://github.com/suprio-dev/QRify

The idea was simple: build a useful project, practice JavaScript DOM manipulation, and learn how to integrate a third-party library while creating a clean, modern interface.

🛠️ Tech Stack

• HTML5 — Structuring the application
• Tailwind CSS — Building a responsive, dark glassmorphism UI
• JavaScript — Handling user interactions, QR generation, and timer logic
• QRCode.js — Generating QR codes from user-provided text or URLs

✨ What Can QRify Do?

QRify allows users to enter text or a URL and generate a QR code instantly. The generated code remains visible for 30 seconds before being cleared automatically.

Other features include:

• Regenerating the previously generated QR code
• Clearing the current QR code manually
• A countdown timer with a visual progress bar
• A responsive interface with a neon-inspired design

🧩 Challenges I Faced While Building It

The most valuable part of this project wasn't writing the initial code. It was debugging the issues I encountered during testing.

1. Fixing the QR Scanning Issue

Initially, the QR code was being generated correctly, but I noticed an interesting problem.

When I scanned the QR code directly from my laptop screen using another mobile device, it worked fine. However, when I took a screenshot and tried scanning it using Google Lens, the code wasn't detected reliably.

After inspecting the generated output, I noticed that the QR code was displayed against the application's dark background. The black QR modules didn't have a sufficiently clear boundary against the surrounding UI.

The difference seemed to be related to how the code appeared in each situation. Direct scanning worked, but scanning the screenshot was less reliable. Image quality, contrast, and the scanner's ability to identify the QR code's edges can all affect detection.

The fix: I placed the generated QR code inside a white wrapper to provide a clean background and stronger contrast around the code.

After this change, the QR code became more reliable to scan in my testing.

This taught me that generating the correct output isn't always enough—the way that output is displayed can also affect usability.

2. Preventing Multiple Timers from Running

QRify uses setInterval() to update the countdown and progress bar every second.

However, I encountered another issue: clicking the Generate button multiple times could start multiple intervals. These timers would run independently and interfere with the countdown and expiry behaviour.

The fix: I used clearInterval() to stop the previous timer before starting a new one.

This ensured that the previous countdown was stopped before a new one began.

It was a small change, but it helped me understand the importance of managing timers and cleaning up previous operations when handling repeated user interactions.

🧠 What I Learned

Building QRify gave me practical experience with:

• DOM manipulation and event listeners
• Reading and validating user input
• Integrating a third-party JavaScript library
• Managing timers with setInterval() and clearInterval()
• Dynamically updating the interface
• Debugging issues by inspecting actual browser output
• Thinking about usability beyond simply making the code work

One important takeaway for me was that debugging isn't just about finding errors in your code. It's also about understanding how your code behaves in real-world situations.

QRify is a relatively small project, but solving these issues made the development process much more meaningful than simply following a tutorial.

I'm continuing to build projects, strengthen my JavaScript fundamentals, and learn through hands-on experimentation.

I'd love to hear your suggestions! What would you improve or add to QRify next?