A modern, feature-rich QR code generator built with vanilla HTML, CSS, and JavaScript. This application allows users to create custom QR codes with various types of content, styling options, and export capabilities.
https://qr-codes-generator-wifi-image-contact.netlify.app/
qr-code qr-code-generator qrcode qrcode-maker
javascript vanilla-javascript html css webapp
open-source frontend-tool barcode barcode-generator
wifi-qrcode vcard-qrcode image-qrcode qr-code-with-logo
customizable-qrcode responsive-webapp dark-mode
offline-tool progressive-webapp pwa utilities
qr-code-svg qr-code-png qr-code-download
online-tool developer-tool modern-webapp
- Text/URL QR Codes: Generate QR codes for plain text or website URLs
- WiFi Network QR Codes: Create QR codes that automatically connect devices to WiFi networks
- Contact QR Codes (vCard): Generate QR codes containing contact information in vCard format
- Picture QR Codes: Embed custom images/logos within QR codes
- Size Control: Adjustable QR code size from 128px to 1024px
- Error Correction: Four levels of error correction (L, M, Q, H)
- Color Customization: Custom foreground and background colors
- Transparent Background: Option for transparent background
- Quiet Zone: Adjustable margin/quiet zone (0-64px)
- Image Integration: For picture QR codes, customizable image size (10%-50%)
- PNG Download: High-quality PNG format with timestamped filenames
- SVG Download: Scalable vector graphics format
- Clipboard Copy: Copy QR codes directly to clipboard
- Print Support: Optimized for printing
- Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
- Dark/Light Theme: Toggle between themes with system preference detection
- Real-time Preview: Instant QR code generation and preview
- Form Validation: Comprehensive input validation with helpful error messages
- Keyboard Shortcuts: Ctrl/Cmd + Enter to generate, Escape to clear focus
- Accessibility: WCAG compliant with proper ARIA labels and keyboard navigation
- No Dependencies: Pure vanilla JavaScript implementation
- Modern CSS: CSS Grid, Flexbox, and CSS Variables for theming
- Progressive Enhancement: Works without JavaScript for basic functionality
- Cross-browser Compatibility: Supports all modern browsers
- Mobile Optimized: Touch-friendly interface with mobile-specific optimizations
- Modern web browser (Chrome, Firefox, Safari, Edge)
- No server setup required - runs entirely in the browser
- Clone or download the project files
- Open
index.htmlin your web browser - Start generating QR codes!
qr-code/
├── index.html # Main HTML file
├── styles.css # CSS styles and theming
├── app.js # JavaScript functionality
└── assets/ # Additional assets (if any)
- Select "Text / URL" from the QR Code Type dropdown
- Enter your text or URL in the input field
- Adjust size, colors, and other settings as needed
- Click "Generate QR Code"
- Download or copy the generated QR code
- Select "WiFi Network" from the QR Code Type dropdown
- Enter the WiFi network name (SSID)
- Choose encryption type (WPA/WPA2/WPA3, WEP, or No Password)
- Enter the password (if required)
- Check "Hidden Network" if applicable
- Generate and download the QR code
- Select "Contact (vCard)" from the QR Code Type dropdown
- Fill in contact information (First Name is required)
- Add optional fields like phone, email, company, etc.
- Generate the QR code in vCard format
- Select "Picture QR Code" from the QR Code Type dropdown
- Enter the text or URL to encode
- Upload an image file (PNG, JPG, JPEG, GIF, WebP, max 2MB)
- Adjust image size using the slider (10%-50%)
- Generate the QR code with embedded image
- Size: 128px to 1024px (in 16px increments)
- Error Correction:
- L (Low): ~7% error correction
- M (Medium): ~15% error correction (default)
- Q (Quartile): ~25% error correction
- H (High): ~30% error correction (auto-selected for picture QR codes)
- Colors: Custom foreground and background colors
- Transparency: Optional transparent background
- Margin: 0-64px quiet zone around the QR code
- Supported Formats: PNG, JPG, JPEG, GIF, WebP
- File Size Limit: 2MB maximum
- Image Size: 10% to 50% of QR code size
- Drag & Drop: Support for drag and drop file upload
- Preview: Real-time image preview before generation
- HTML5: Semantic markup with accessibility features
- CSS3: Modern styling with CSS Grid, Flexbox, and CSS Variables
- Vanilla JavaScript: No frameworks or dependencies
- QR Code Styling Library: External library for QR code generation
- Modular Architecture: Organized into logical functions
- Event Handling: Comprehensive event listeners for user interactions
- Form Validation: Real-time validation with debounced input handling
- Theme Management: Local storage for theme preferences
- File Handling: Image upload with validation and preview
- Download Functionality: PNG and SVG export capabilities
- CSS Variables: Theme-aware color system
- Responsive Design: Mobile-first approach with breakpoints
- Dark Mode: Complete dark theme implementation
- Animations: Smooth transitions and hover effects
- Accessibility: Focus states and keyboard navigation
- Chrome: 60+
- Firefox: 55+
- Safari: 12+
- Edge: 79+
- Mobile Browsers: iOS Safari, Chrome Mobile, Samsung Internet
- Touch Optimized: Large touch targets and swipe gestures
- Responsive Layout: Adaptive design for all screen sizes
- Mobile Navigation: Collapsible navigation menu
- Touch-friendly Forms: Optimized input fields for mobile devices
- Mobile-specific Styling: Adjusted spacing and typography
- Client-side Processing: All QR code generation happens in the browser
- No Data Collection: No user data is sent to external servers
- Local Storage: Only theme preferences are stored locally
- File Validation: Image files are validated before processing
- Secure Downloads: Generated files are downloaded directly to user's device
- ARIA Labels: Proper labeling for screen readers
- Keyboard Navigation: Full keyboard accessibility
- Focus Management: Clear focus indicators and logical tab order
- Color Contrast: WCAG AA compliant color combinations
- Screen Reader Support: Semantic HTML and descriptive text
- Error Announcements: Live regions for dynamic content updates
- Debounced Input: Reduces unnecessary processing during typing
- Lazy Loading: Images and resources loaded on demand
- Efficient DOM Updates: Minimal DOM manipulation
- Optimized Animations: Hardware-accelerated CSS transitions
- Memory Management: Proper cleanup of event listeners and resources
- Clone the repository
- Open
index.htmlin a local server (recommended) - Use browser developer tools for debugging
- Test across different browsers and devices
- HTML: Semantic structure with accessibility features
- CSS: Modular styles with CSS variables for theming
- JavaScript: Organized into logical sections with clear comments
The application uses modern web standards but includes fallbacks for older browsers where possible.
This project is open source and available under the MIT License.
Abubakkar Shahzad
- Email: [email protected]
- Phone: +92 314 2979757
- GitHub: github.com/abubakkar052
- LinkedIn: linkedin.com/in/abubakkar-shahzad
Contributions are welcome! Please feel free to submit issues, feature requests, or pull requests.
- Initial release with core QR code generation features
- Support for multiple QR code types
- Customization options and export capabilities
- Responsive design and accessibility features
- Dark/light theme support
- Picture QR codes require high error correction for optimal readability
- Some older browsers may not support all features
- Large image files may cause performance issues on low-end devices
- QR code history and favorites
- Batch QR code generation
- Advanced styling options (gradients, patterns)
- QR code scanning functionality
- Social media sharing integration
- API for programmatic QR code generation
Note: This QR Code Generator was created as a learning exercise and demonstrates modern web development practices. While functional and feature-rich, it may contain imperfections typical of rapid prototyping.
