diff --git a/Vanilla-JS-Projects/Basic/Qr-Code-Generator/README.MD b/Vanilla-JS-Projects/Basic/Qr-Code-Generator/README.MD new file mode 100644 index 00000000..7a17d934 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Qr-Code-Generator/README.MD @@ -0,0 +1,72 @@ +

đŸ’Ĩ QR Code Generator đŸ’Ĩ

+ + + +

Tech Stack Used 🎮

+ + +
+ + ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) + ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) + + ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) + + + + + + + + + + + +
+ + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +## :zap: Description 📃 + +
+ +

An QR code generator is a tool that converts text, URLs, or other data into a scannable QR code, enabling easy sharing of information.

+
+ + + + +## :zap: How to run it? 🕹ī¸ + + + +- Clone this repository. +- Navigate to this project directory +- Run the `index.html` file. + + + +## :zap: Screenshots 📸 + +![img](./screenshot.webp) + + + + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +

Developed By Ananya Gupta đŸ‘Ļ

+

+ + + +

+ +

Happy Coding 🧑‍đŸ’ģ

+ +

Show some  â¤ī¸  by  đŸŒŸ  this repository!

diff --git a/Vanilla-JS-Projects/Basic/Qr-Code-Generator/index.html b/Vanilla-JS-Projects/Basic/Qr-Code-Generator/index.html new file mode 100644 index 00000000..8fafd1b6 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Qr-Code-Generator/index.html @@ -0,0 +1,29 @@ + + + + + + + + + + +
+
+

+ QR Code Generator +

+
+
+
+ +
+
+ + + + diff --git a/Vanilla-JS-Projects/Basic/Qr-Code-Generator/screenshot.webp b/Vanilla-JS-Projects/Basic/Qr-Code-Generator/screenshot.webp new file mode 100644 index 00000000..d73be617 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Qr-Code-Generator/screenshot.webp differ diff --git a/Vanilla-JS-Projects/Basic/Qr-Code-Generator/script.js b/Vanilla-JS-Projects/Basic/Qr-Code-Generator/script.js new file mode 100644 index 00000000..b53f6396 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Qr-Code-Generator/script.js @@ -0,0 +1,19 @@ +let qrcode = new QRCode( + document.querySelector(".qrcode") +); +qrcode.makeCode("Why did you scan me?"); +function generateQr() { + if ( + document.querySelector("input") + .value === "" || + document.querySelector("input") + .value === " ") { + alert( + "Input Field Can not be blank!" + );} + else { + qrcode.makeCode( + document.querySelector( + "input" + ).value); +}} \ No newline at end of file diff --git a/Vanilla-JS-Projects/Basic/Qr-Code-Generator/style.css b/Vanilla-JS-Projects/Basic/Qr-Code-Generator/style.css new file mode 100644 index 00000000..fb7948ec --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Qr-Code-Generator/style.css @@ -0,0 +1,56 @@ +body { + font-family: "Ubuntu", sans-serif; + background-color: #f0f0f0; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} +.container { + background-color: #fff; + box-shadow: 0px 0px 10px + rgba(0, 0, 0, 0.1); + border-radius: 5px; + padding: 20px; + text-align: center; +} +.header { + text-align: center; +} +h1 { + font-size: 28px; + margin-bottom: 10px; + color: #333; +} +hr { + border: 1px solid #ddd; + margin: 20px 0; +} +input[type="text"] { + width: 100%; + padding: 10px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 5px; + outline: none; +} +.qrcode { + margin: 20px 0; +} +button { + background-color: #007bff; + color: #fff; + padding: 10px 20px; + font-size: 16px; + border: none; + border-radius: 5px; + cursor: pointer; + outline: none; +} + +/* Hover effect for the button */ +button:hover { + background-color: #0056b3; +} \ No newline at end of file diff --git a/Vanilla-JS-Projects/README.md b/Vanilla-JS-Projects/README.md index 3fc95ffa..b4b1918c 100644 --- a/Vanilla-JS-Projects/README.md +++ b/Vanilla-JS-Projects/README.md @@ -121,6 +121,7 @@ | 94 | [Movie-App](./Intermediate/Movie-App/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | | 95 | [Meme-Creator](./Intermediate/Meme-Creator/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | | 96 | [Github-Profile-Viewer](./Intermediate/Github-Profile-Viewer/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | +| 97 | [Qr-Code-Generator](./Basic/Qr-Code-Generator/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |