QR Code Generator

A simple web app that generates QR codes from user input. Enter any text or URL, click the button, and a QR code appears. Attempting to generate with an empty input triggers a shake animation.

📦 Demo

Live Demo → QR Code Generator

🛠️ Features

• Generates a QR code using a free API
• Supports text or URL input
• Displays the generated QR image
• Shake animation when input is empty
• Clean, minimal UI

📁 Project Structure

/ (root) ├── index.html ├── style.css ├── script.js ├── images/ │ └── delete.png (if used) └── README.md

• index.html — main HTML markup
• style.css — styling and error animations
• script.js — logic for QR generation, error handling
• images/ — any image assets
• README.md — this project documentation

🚀 How to Use

1. Clone or fork the repository
2. Open index.html in your browser
3. Enter a text or URL in the input box
4. Click Generate QR
5. The QR code image will appear
6. If input is empty, the input box shakes (error)

🔧 Technologies Used

• HTML
• CSS (with keyframe animation for shake effect)
• JavaScript (DOM manipulation, event handling)
• QR Code API: https://api.qrserver.com/v1/create-qr-code/

🧩 How It Works (Overview)

• The app takes input from a text field
• If input length > 0:
  • Constructs the QR API URL with the input
  • Sets the src of an <img> to that URL, causing the QR image to load
  • Displays the image container
• If input is empty:
  • Adds .error class to the input element
  • Uses CSS @keyframes to animate shake
  • Removes .error after a short delay so the animation can replay

📌 Tips & Troubleshooting

• Make sure input element’s ID matches in JS (qrText)
• Use https:// in the API URL to avoid mixed content issues
• In CSS, include units (e.g. translateX(-2px)) else transforms may not apply
• To replay animation, remove and re-add .error class in JS

📬 Contribution

Add more features like:

• Downloading the QR image as PNG
• Custom QR size input
• Styling themes (dark mode, etc.)
• Input validation (e.g. only URLs)

Contributions are welcome — fork the repo and submit a pull request!

📜 License

MIT License — feel free to use and modify the project as you like.