QR Code Generator

A Simple and effective website to generate QR Code of any link

Hi, I'm Sumon Maiti!

Student at Academy of Technology

QR Code Suite

A dynamic, front-end web application for generating, customizing, and managing QR codes instantly. This tool goes beyond simple generation, offering a full suite of features for personal and professional use, all running directly in your browser.

🔗 Live Demo

Portfolio link

✨ Features

This project is built with a rich set of features to provide a complete user experience:

• ⚡ Real-Time Generation: The QR code updates instantly as you type, providing immediate visual feedback.

• 🔡 Multiple Data Types: Create QR codes for more than just websites.

  • URL: Standard web links.

  • WiFi: Share your network credentials (SSID, Password, Encryption) for easy connection.

  • vCard: Create a contact card with your Name, Phone, and Email.

  • Text: Encode any plain text message.

• 🎨 Customization:

  • Color Picker: Change the color of the QR code's dots.

  • Background Picker: Change the background color to match your style or brand.

• 🔗 Share & Download:

  • Native Share: Uses the Web Share API to send the QR code directly to apps like WhatsApp, Mail, or Telegram (on supported devices).

  • Download Options: Save your QR code as a PNG or JPEG file.

• 📋 History:

  • Local Storage: Automatically saves your 10 most recent QR codes in your browser's local storage.

  • One-Click Restore: Click any item in your history to instantly reload and regenerate that QR code.

• 📱 Fully Responsive: A modern, mobile-first design that looks and works great on any device, from phones to desktops.

🛠 Tech Stack

This project is built entirely with front-end technologies:

• HTML5: Provides the core structure and accessibility.

• CSS3: Used for all styling, including the glassmorphism effect, responsive layout (Flexbox), and background animations.

• JavaScript (ES6+): Powers all the dynamic functionality, including tab switching, real-time updates, and handling browser events.

• qrcode.js: A lightweight, canvas-based JavaScript library used to generate the QR codes.

🚀 How to Use

1. Download the Files: Make sure you have index.html, style.css, and script.js in the same folder.

2. Open the App: Simply open the index.html file in any modern web browser.

3. Choose Your Type: Click one of the tabs (URL, WiFi, Contact, or Text) to select the type of data you want to encode.

4. Enter Your Data: Fill in the input fields. The QR code on the right will update in real-time.

5. Customize (Optional): Use the color pickers to change the dot and background colors.

6. Save or Share:

   • Click Share to send the code using your device's native share menu.

   • Click Download (and select a format) to save the image file.

   • Your code will be automatically added to the "History" list for later use.

📂 File Structure

├── README.md (Project documentation)
├── index.html (The main HTML structure)
├── style.css (All styles and animations)
└── script.js (All application logic)

I love connecting with different people so if you want to say hi, I'll be happy to meet you more! :)

---

⭐️ From @Sumon