├── qr.png ├── logic.js ├── index.html └── style.css /qr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moeez-Rajpoot/QR-Code-Generator/HEAD/qr.png -------------------------------------------------------------------------------- /logic.js: -------------------------------------------------------------------------------- 1 | const inputbox = document.getElementById('input'); 2 | const Displaydiv = document.getElementById('qrcode'); 3 | const Displayimg = document.getElementById('qrimg'); 4 | 5 | function Generate(params) { 6 | 7 | Displaydiv.style.display="flex"; 8 | Displayimg.src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + inputbox.value; 9 | 10 | 11 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Qr-Code Generator 8 | 9 | 10 | 11 |
12 |

QR CODE
GENERATOR

13 | 14 |
15 | Qr-Code 16 |
17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body::before { 8 | content: ""; 9 | position: fixed; 10 | top: 0; 11 | left: 0; 12 | width: 100%; 13 | height: 100%; 14 | background: linear-gradient(135deg ,#F2CD5C , #F2921D); 15 | z-index: -1; 16 | } 17 | 18 | .container{ 19 | 20 | background: linear-gradient(135deg , #A61F69 , #400E32); 21 | padding: 20px; 22 | height: auto; 23 | width: 600px; 24 | border-radius: 10px; 25 | text-align: center; 26 | margin: 100px auto; 27 | text-transform: capitalize; 28 | } 29 | 30 | .container h2{ 31 | 32 | font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 33 | font-size: 30px; 34 | margin-top: 25px; 35 | color: white; 36 | } 37 | 38 | .container input{ 39 | 40 | width: 80%; 41 | padding: 20px; 42 | margin-top: 40px; 43 | border-radius: 5px; 44 | border: none; 45 | outline: none; 46 | } 47 | 48 | #qrimg{ 49 | 50 | margin-top: 20px; 51 | width: 40%; 52 | margin-left: 30%; 53 | background-color: transparent; 54 | } 55 | button{ 56 | 57 | font-size: 20px; 58 | text-align: center; 59 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 60 | margin-top: 20px; 61 | border-radius: 10px; 62 | padding: 10px; 63 | height: 60px; 64 | width: 110px; 65 | } 66 | 67 | button:hover{ 68 | 69 | 70 | color: white; 71 | background-color: #F2921D; 72 | } 73 | 74 | #qrcode{ 75 | 76 | display: none; 77 | } --------------------------------------------------------------------------------