QRCode-Generator

A simple, client-side QR code generator built with plain HTML, CSS and JavaScript.

This repository contains a small web app that generates QR codes from user-provided text or URLs. It's a static site — open index.html in your browser to use it.

Features

• Generate QR codes from text or URLs
• Download or save generated QR images (if supported by the UI)
• Lightweight and dependency-free (assumes vanilla JS implementation)

Files

• index.html — Main HTML page and UI.
• script.js — JavaScript that handles the QR generation logic.
• style.css — Styles for the UI.

If your project contains additional files or assets, add them here.

Quick start

Option 1 — Open locally (recommended for quick testing):

1. In Finder, double-click index.html to open it in your default browser.

Option 2 — Serve with a local HTTP server (recommended for browsers that block some file:// features):

Using Python 3 (macOS has Python 3 installed or use your venv):

# run from project root (/Users/nok/Desktop/QRCode-Generator)
python3 -m http.server 8000
# then open http://localhost:8000 in your browser

Or using Node's http-server (if you have Node.js installed):

npm install --global http-server
http-server -c-1
# open the printed local URL in your browser

Usage

1. Open the app in your browser.
2. Enter the text or URL you want to encode into a QR code.
3. Click the "Generate" (or equivalent) button.
4. The QR image will appear; use the download/save control if present.

If the UI differs from the steps above, check index.html to see input element IDs and button labels.

Development

• Edit script.js to change generation logic or to integrate a different QR library.
• Edit style.css for styling changes.
• No build step required for basic edits — just refresh the browser after saving changes.

Suggested small improvements

• Add a README screenshot of the UI (place in assets/ and reference it).
• Add a small test page or E2E test with Playwright or Cypress for basic interaction.
• Add a package.json if you plan to add dev tools or bundlers.

Troubleshooting

• If QR generation doesn't work in the browser when opening index.html directly, serve the folder over HTTP (see Quick start, Option 2).
• If images don't download, check browser popup/download permissions and the code in script.js.

Assumptions

I added this README assuming the project is a static, client-side QR generator with the three files listed in the repository root: index.html, script.js, and style.css.

If your project uses a specific QR library (for example qrcodejs or qr-code-styling) or additional build steps, tell me and I can update the README to include precise installation and usage instructions.

License

This project is provided under the MIT License.

Copyright 2025 Alex Lam

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

---

If you want, I can:

• Add a short screenshot or GIF to the README.
• Add a package.json and a tiny dev server script.
• Update the author name and year in the license.