https://github.com/shivlalsharma/qr-code-generator
A responsive QR Code Generator built with HTML, CSS, and JavaScript, allowing users to create, customize, and download QR codes effortlessly.
https://github.com/shivlalsharma/qr-code-generator
css html javascript qr-code qr-code-generator responsive-design web-development
Last synced: about 2 months ago
JSON representation
A responsive QR Code Generator built with HTML, CSS, and JavaScript, allowing users to create, customize, and download QR codes effortlessly.
- Host: GitHub
- URL: https://github.com/shivlalsharma/qr-code-generator
- Owner: shivlalsharma
- License: mit
- Created: 2024-11-30T18:22:00.000Z (over 1 year ago)
- Default Branch: javascript
- Last Pushed: 2024-12-01T07:08:35.000Z (over 1 year ago)
- Last Synced: 2025-04-07T20:54:52.269Z (about 1 year ago)
- Topics: css, html, javascript, qr-code, qr-code-generator, responsive-design, web-development
- Language: JavaScript
- Homepage: https://qr-code-generator03.netlify.app/
- Size: 12.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# **QR Code Generator**
A **QR Code Generator** built with HTML, CSS, and JavaScript. This tool allows users to easily generate QR codes for any text or URL, customize their size, and download them in PNG format. It also includes a smooth, responsive design and animations for an enhanced user experience.
---
## Deployment
🌐 This project is live and accessible online. Try it here: [QR Code Generator](https://qr-code-generator03.netlify.app/)
---
## **Features**
- **Generate QR Codes** for any text or URL.
- **Responsive Design**: Works seamlessly across devices.
- **Customizable QR Code Sizes**: Choose from a range of sizes.
- **Download Option**: Save the generated QR code as a PNG file.
- **Reset Functionality**: Reset the QR code generator with smooth animations.
- Clean and user-friendly interface.
- Real-time transitions for better UX.
---
## **Technologies Used**
- **HTML5**: For structuring the web page.
- **CSS3**: For styling and responsiveness.
- **JavaScript**: For interactive functionality.
- **QRCode.js**: A library to generate QR codes dynamically.
---
## **How It Works**
1. **Input Text/URL**:
- Enter any text or URL in the input field.
2. **Generate QR Code**:
- Click the **Generate** button. A QR code will be generated and displayed with a smooth height transition.
3. **Customize Size**:
- Use the dropdown to select the size of the QR code.
4. **Download QR Code**:
- Click the **Download** button to save the QR code as a PNG image.
5. **Reset**:
- Click the **Reset** button to clear the input and hide the QR code with an animation.
---
## **Installation**
Follow these steps to run the project locally:
1. **Clone the repository**:
```bash
git clone https://github.com/shivlalsharma/qr-code-generator.git
cd qr-code-generator
```
2. **Open the `index.html` file in your browser**.
Alternatively, you can set up a local server (e.g., using **VS Code Live Server**) to view the project in your browser.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Author
Created and deployed by **Shivlal Sharma**.
- **GitHub**: [Shivlal Sharma's GitHub](https://github.com/shivlalsharma)
- **LinkedIn**: [Shivlal Sharma's LinkedIn](https://www.linkedin.com/in/shivlal-sharma-56ba5a284/)