QR Code Generator
A fully interactive web application that allows users to generate custom QR codes with adjustable colors, sizes, and share/download options—all in a sleek, dark-themed interface.
Project Overview
Created to offer a quick and intuitive way to generate, customize, and share QR codes. This project focuses on user experience and modern web APIs, making it straightforward to produce high-resolution QR codes in various color schemes.
Implementation
Built using a minimal stack of HTML, CSS, and JavaScript, leveraging the popular QRCode.js library: 1. **HTML Structure**: A clean, mobile-friendly layout with color pickers for foreground and background, a size dropdown, text input, and “Generate” button. 2. **CSS Design**: A sleek dark mode interface, with a responsive container for the QR code, plus subtle hover effects on buttons. 3. **JavaScript Logic**: - **QRCode.js**: Dynamically generates QR codes based on the user’s input text, color selections, and chosen size. - **Real-Time Updates**: Color or text changes automatically trigger QR code regeneration. - **Download & Share**: Implements a “Download” link that converts the QR code canvas to a data URL, and a “Share” button that uses the File Sharing API for direct device sharing (if supported). - **Clear Input**: A small “X” button resets the text field and removes the QR code. - **Fallback Handling**: Alerts users if they attempt to download or share before a QR code is generated or if their browser lacks share support.
Challenges
Encountered several technical and UX hurdles: - **Dynamic Canvas Updates**: Ensuring the QR code re-renders smoothly whenever the color, size, or text changes. - **Browser Sharing**: Using the experimental File Sharing API, which requires handling potential errors for browsers that don't support it. - **Performance at Larger Sizes**: Managing canvas rendering times for up to 1000×1000 QR codes. - **Color Contrast**: Keeping a dark-themed UI consistent while allowing potentially dark or light QR code color choices without visual clashing.
Outcome
Successfully delivered a highly customizable, user-friendly QR code generator. The final application supports on-the-fly color changes, a broad range of sizes, and direct file sharing or download. It showcases proficiency in modern web APIs and best practices in JavaScript for generating and exporting canvas-based assets.
Project Gallery
