QR Code Generator

A simple, elegant web application that converts URLs into QR codes instantly. Built with vanilla JavaScript, styled with Tailwind CSS, and hosted on GitHub Pages.

Features

• ✨ Instant QR Code Generation - Convert any URL to a QR code in seconds
• 📱 Responsive Design - Works seamlessly on desktop, tablet, and mobile devices
• 💾 Download Functionality - Save generated QR codes as PNG images
• ✅ URL Validation - Ensures only valid URLs are processed
• 🎨 Modern UI - Clean, gradient-based design with smooth animations
• 🚀 Fast & Lightweight - No build process, pure vanilla JavaScript

Live Demo

Visit the live application: QR Code Generator

(Update the URL above after deploying to GitHub Pages)

Usage

1. Enter a URL - Type or paste any valid URL (must start with http:// or https://)
2. Generate - Click the "Generate QR Code" button or press Enter
3. Download - Click the "Download QR Code" button to save the image

Technologies Used

• HTML5 - Semantic markup structure
• CSS3 - Custom styles and animations
• JavaScript (ES6+) - Application logic
• Tailwind CSS - Utility-first CSS framework (via CDN)
• QRCode.js - QR code generation library (via CDN)

Local Development

To run this project locally:

1. Clone the repository:

git clone https://github.com/your-username/qr-code-generator.git
cd qr-code-generator

2. Open index.html in your web browser:

# On macOS
open index.html

# On Linux
xdg-open index.html

# On Windows
start index.html

Or use a local development server:

# Using Python 3
python -m http.server 8000

# Using Node.js (http-server)
npx http-server

Then navigate to http://localhost:8000 in your browser.

Project Structure

qr-code-generator/
├── index.html          # Main HTML file
├── app.js             # JavaScript logic
├── style.css          # Custom CSS styles
├── README.md          # Project documentation
└── .gitignore         # Git ignore rules

Deployment

This project is configured for GitHub Pages deployment:

1. Push your code to GitHub
2. Go to repository Settings → Pages
3. Select "Deploy from a branch"
4. Choose main branch and / (root) folder
5. Click Save

Your site will be live at https://your-username.github.io/qr-code-generator

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

Contributing

Contributions are welcome! Feel free to:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is open source and available under the MIT License.

Acknowledgments

• QRCode.js - QR code generation library
• Tailwind CSS - CSS framework
• Icons from Heroicons

Contact

Created by [Your Name] - feel free to reach out!

---

Made with ❤️ using vanilla JavaScript