CodingNORVIN/QR-Code-Generator

A modern web-based QR code generator with customization options, built with HTML, SCSS, and JavaScript for instant creation and downloading of scannable codes

QR Code Generator

A modern QR code generator built with semantic HTML, SCSS, and vanilla JavaScript.

Features

• Customizable QR Codes: Choose colors, sizes, and content
• Instant Generation: Real-time QR code creation
• Download & Share: Save PNGs or share directly
• Responsive Design: Works on all devices
• Clean Architecture: Organized SCSS with CSS variables

Usage

1. Clone the repository:

   git clone https://github.com/yourusername/qr-generator.git

2. Open index.html in your browser
3. Enter any text or URL to generate a QR code
4. Customize colors and size using the controls
5. Download or share your QR code

Project Structure

qr-generator/
├── css/
│   └── main.css          # Compiled CSS
├── js/
│   └── script.js         # QR generation logic
├── scss/
│   └── main.scss         # Source SCSS styles
└── index.html            # Main application file

Customization

Styles

Edit the SCSS variables in main.scss to change:

// Color system
:root {
  --color-primary: #4361ee;         // Main brand color
  --color-gradient-start: #7209b7;  // Gradient start
  --color-gradient-mid: #3a0ca3;    // Gradient middle
  --color-gradient-end: #4361ee;    // Gradient end
}

Functionality

Modify script.js to:

• Change the QR code API endpoint
• Add new customization options
• Implement additional sharing methods

Demo

Dependencies

• QRServer API – Free QR code generation
• Font Awesome – Icon toolkit
• Google Fonts – Inter font family

License

MIT © CodingNORVIN