commit a2335a70822af8c91dcb857d75ecee7f066e1e7b Author: Kumi Date: Sat Sep 7 20:00:43 2024 +0200 feat: add initial version of QRMaker web app Introduced QRMaker, a simple web app for generating QR codes from user input. Key features include real-time QR code generation, multi-line input, and responsive design using Bootstrap. Added initial project setup with HTML, CSS, JS, and a README for setup and usage instructions. diff --git a/README.md b/README.md new file mode 100644 index 0000000..a390396 --- /dev/null +++ b/README.md @@ -0,0 +1,61 @@ +# QRMaker + +A simple web application that allows users to generate QR codes from the text they input. The application is built using Bootstrap for styling and QRCode.js for generating the QR codes. + +The QR code is generated locally in the browser, no data is sent to a server. + +## Features + +- Real-time QR code generation based on user input. +- Multi-line input. +- Responsive design with Bootstrap. + +## Demo + +You can view a live version of the project [here](https://qrmaker.private.coffee). + +## Installation + +To run this project locally, follow these steps: + +1. **Clone the repository:** + + ```sh + git clone https://git.private.coffee/PrivateCoffee/QRMaker.git + cd QRMaker + ``` + +2. **Open `index.html` in your browser:** + ```sh + open index.html + ``` + +## Usage + +1. Open the web page. +2. Enter text into the multi-line input field. +3. The QR code will be generated automatically as you type. +4. Done! You can now download the QR code or scan it directly from the screen. + +## Technologies Used + +- HTML +- CSS (Bootstrap) +- JavaScript (QRCode.js) + +## Contributing + +Contributions are welcome! Please fork the repository and create a pull request with your changes. + +## License + +This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. + +## Acknowledgements + +- [Bootstrap](https://getbootstrap.com/) +- [QRCode.js](https://davidshimjs.github.io/qrcodejs/) + +## Contact + +For any questions or feedback, please open an issue or join our [Matrix room](https://matrix.pcof.fi/#/#private.coffee:private.coffee). diff --git a/index.html b/index.html new file mode 100644 index 0000000..93c2198 --- /dev/null +++ b/index.html @@ -0,0 +1,46 @@ + + + + + + QRMaker + + + + + + +
+
+
+
+

QR Code Generator

+
+ + +
+
+
+
+
+
+
+
+ + + + + + + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..58563ad --- /dev/null +++ b/script.js @@ -0,0 +1,22 @@ +document.addEventListener('DOMContentLoaded', function () { + const textInput = document.getElementById('text-input'); + const qrCodeContainer = document.getElementById('qrcode'); + + const qrCode = new QRCode(qrCodeContainer, { + text: "", + width: 256, + height: 256, + }); + + function updateQRCode() { + const text = textInput.value; + qrCode.clear(); + if (text) { + qrCode.makeCode(text); + } + } + + textInput.addEventListener('input', updateQRCode); + + updateQRCode(); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..b3962cf --- /dev/null +++ b/style.css @@ -0,0 +1,28 @@ +body { + padding-top: 50px; + background-color: #f8f9fa; +} +.qr-code-container { + margin-left: auto; + margin-right: auto; + margin-top: 20px; +} +.card { + padding: 20px; +} +.textarea-container { + margin-bottom: 20px; +} +footer { + background-color: #343a40; + color: #fff; + padding: 10px 0; + position: fixed; + width: 100%; + bottom: 0; + text-align: center; +} +footer a { + color: #ffc107; + text-decoration: none; +} \ No newline at end of file