-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #37 from Arisha2902/main
#36: QR Code Generator
- Loading branch information
Showing
5 changed files
with
176 additions
and
1 deletion.
There are no files selected for viewing
102 changes: 102 additions & 0 deletions
102
Adding Extension to files with no extension/Qr Code Generator/Code.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| *{ | ||
| margin:0px; | ||
| padding:0px; | ||
| } | ||
| .bg{ | ||
| background-color: antiquewhite; | ||
| border: 2px solid black; | ||
| width:100%; | ||
| height:100vh; | ||
| padding:10px; | ||
| background :linear-gradient(135deg,#153677,#4e085f); | ||
| } | ||
| .container{ | ||
| font-style:Italic; | ||
| background-color:#d2d1ff; | ||
| border:3px solid black; | ||
| border-radius:12px; | ||
| width:70%; | ||
| height:65vh; | ||
| position:relative; | ||
| margin-left:9vh; | ||
| margin-top:4vh; | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex-wrap: wrap; | ||
| text-align: center; | ||
| padding-top: 30px; | ||
| } | ||
| .main{ | ||
| display: grid; | ||
| margin-bottom:19px; | ||
| align-items: center; | ||
| justify-content: center; | ||
| color:blanchedalmond; | ||
| font-size: x-large; | ||
| } | ||
| form{ | ||
| padding-left:7px; | ||
| margin: 0; | ||
| position: absolute; | ||
| top: 30%; | ||
| left: 50%; | ||
| transform: translate(-50%, -20%); | ||
| padding-top:13px; | ||
| padding-bottom:13px; | ||
| color:black ; | ||
| } | ||
| h5{ | ||
| font-size: 35px; | ||
| justify-content: center; | ||
| } | ||
| #qrText{ | ||
| padding-left:7px; | ||
| color:black; | ||
| height: 45px; | ||
| font-size: 30px; | ||
| } | ||
| .button{ | ||
| float:right; | ||
| margin:auto; | ||
| background-color:red; | ||
| color:white; | ||
| padding:10px; | ||
| border:none; | ||
| border-radius:16px; | ||
| text-align:center; | ||
| font-size:11px; | ||
| font-style:Italic; | ||
| font-weight:bold; | ||
| margin-top:14px; | ||
| } | ||
| #imgBox { | ||
| position: relative; | ||
| border-radius: 8px; | ||
| transition: max-height 1s; | ||
| top: 20% | ||
| } | ||
| #imgBox img { | ||
| width: 100%; | ||
| } | ||
| #imgBox.show-img { | ||
| max-width: 210px; | ||
| border: 2px solid #d1d1d1; | ||
| margin-top: 10px; | ||
| } | ||
| @media (max-width:556px) { | ||
| .container{ | ||
| padding-top: 20px; | ||
| } | ||
| .button{ | ||
| margin-top: 3px; | ||
| margin-bottom: 5px; | ||
| } | ||
| #qrText{ | ||
| height: 30px; | ||
| width: 90%; | ||
| font-size: 27px; | ||
| } | ||
| h5{ | ||
| font-size: 23px; | ||
| } | ||
| } |
29 changes: 29 additions & 0 deletions
29
Adding Extension to files with no extension/Qr Code Generator/Code.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Document</title> | ||
| <link rel="stylesheet" href="Code.css"> | ||
| </head> | ||
| <body> | ||
| <div class="bg"> | ||
| <div class="main"> | ||
| <h1>QRTextify</h1> | ||
| </div> | ||
| <div class ="container" > | ||
| <h5>Enter Your Website URL</h5> | ||
| <form action=""> | ||
| <div> | ||
| <input type="text" id="qrText" placeholder="Enter Your Text"> | ||
| </div> | ||
| <button class="button" onclick="generatQR(event)">Generate QR Code</button> | ||
| <div id="imgBox"> | ||
| <img src="" id="qrImage"> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| <script src="Code.js"></script> | ||
| </body> | ||
| </html> |
11 changes: 11 additions & 0 deletions
11
Adding Extension to files with no extension/Qr Code Generator/Code.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| let imgBox = document.getElementById("imgBox"); | ||
| let qrImage = document.getElementById("qrImage"); | ||
| let qrText = document.getElementById("qrText"); | ||
|
|
||
| function generatQR(event) { | ||
| event.preventDefault(); | ||
| if (qrText.value.length > 0) { | ||
| qrImage.src = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + qrText.value; | ||
| imgBox.classList.add("show-img"); | ||
| } | ||
| } |
22 changes: 22 additions & 0 deletions
22
Adding Extension to files with no extension/Qr Code Generator/readme.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
|
|
||
| Installation:- | ||
|
|
||
| 1. Open Vs code | ||
| 2. Click files icon | ||
| 3. Click on its last icon(Extension) | ||
| 4. On Extension search "Live Server",Install live server | ||
|
|
||
| You are Ready run your program i.e. "to 'Generator a Qr Code' of your desired URL or text". | ||
|
|
||
| How it Works:- | ||
| 1. Enter text or a URL in the input field. | ||
| 2. Click the "Generate QR Code" button to create a QR code. | ||
| 3. The JavaScript code sends the input to an external API that generates the QR code. | ||
| 4. The generated QR code is displayed in an image box below the button. | ||
|
|
||
|
|
||
|
|
||
| How To Use:- | ||
| 1) Enter your specified text in "Enter Your text". | ||
| 2) click on "Generate QR Code". | ||
| #) Your Qr Code is displayed ,use it as per your requirement |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters