A versatile and easy-to-use QR code generator built with HTML, CSS, and JavaScript. This project allows users to create custom QR codes by simply entering data like URLs, contact details, or any text, with instant visual feedback.
- Features
- Live Demo
- Installation
- Usage
- Project Structure
- Technologies Used
- Customization
- Contributing
- Future Enhancements
- Known Issues
- License
- Author
- Instant QR Code Generation: Enter any text or URL, and generate a QR code immediately.
- Customizable Appearance: Modify the size, color, and style of QR codes to fit your needs.
- Lightweight and Fast: Pure HTML, CSS, and JavaScript with no external libraries, ensuring quick load times.
- Responsive Design: Works seamlessly across desktops, tablets, and mobile devices.
- Downloadable QR Codes: Save your QR codes as images for easy sharing.
- No Dependencies: Runs entirely on the browser without any backend, making it highly portable and secure.
Check out the live demo of the project here: https://sohumcs.github.io/qr-code-generator/
- Web Browser (Chrome, Firefox, Edge, etc.)
- Clone the Repository
git clone https://github.com/sohumcs/qr-code-generator.git cd qr-code-generator
Open index.html Double-click the index.html file, or open it using your preferred browser. Usage Enter Data: Input any URL, text, or data that you want to encode. Customize: (Optional) Adjust the QR code size, colors, or error correction levels if applicable. Generate: Click the "Generate QR Code" button to see your QR code appear instantly. Download: Right-click on the QR code image to save it to your device. Project Structure plaintext Copy code qr-code-generator/ │ ├── index.html # Main HTML structure ├── styles.css # CSS file for styling the interface ├── script.js # JavaScript for QR code generation └── assets/ # Contains images and other assets if needed Technologies Used HTML: Provides the structure of the webpage. CSS: Styles the application, creating a responsive and attractive layout. JavaScript: Handles the logic for generating and customizing QR codes using the QR code generation API. Customization Changing Styles You can modify the look and feel of the QR code generator by editing the styles.css file. Adjust colors, fonts, and layout to match your preferences.
Enhancing Functionality To add more features or tweak the QR code generation process, modify the script.js file. You can integrate additional options like different QR code formats, error correction levels, or even add logo support.
Contributing Contributions are welcome! Follow these steps to contribute:
Fork the repository. Create a new branch (git checkout -b feature-branch). Make your changes and test thoroughly. Commit your changes (git commit -m 'Add some feature'). Push to the branch (git push origin feature-branch). Open a pull request. Future Enhancements Logo Insertion: Allow users to add logos in the center of the QR code. Color Gradients: Add gradient color options for more attractive designs. Error Correction Level Adjustment: Enable users to set different levels of error correction. Bulk QR Code Generation: Generate multiple QR codes from a list of inputs. Known Issues Download Issues: Occasionally, the download functionality may not work as expected on certain browsers due to security settings. Custom Colors: Custom colors may not display correctly on all types of scanners. License This project is licensed under the MIT License. You are free to use, modify, and distribute this software.
Author Sohum Chandra Srivastava Passionate developer keen on creating intuitive and efficient web tools. Connect with me for feedback, suggestions, or collaborations!