├── requirments.txt ├── index.html ├── LICENSE ├── script.js ├── README.md └── style.css /requirments.txt: -------------------------------------------------------------------------------- 1 | api~=0.68.1 2 | uvicorn~=0.15.0 3 | aiofiles~=0.7.0 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | qrcode 8 | 9 | 10 | 11 | 12 |

13 |

14 |

QR Code Generator

15 |

Paste a url or enter text to create QR code

16 |

17 |

18 | 19 | 20 |
21 | 22 |

23 |

24 | 25 |

26 |

27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 anusthan12 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const wrapper = document.querySelector(".wrapper"), 2 | qrInput = wrapper.querySelector(".form input"), 3 | generateBtn = wrapper.querySelector(".form button"), 4 | qrImg = wrapper.querySelector(".qr-code img"); 5 | 6 | generateBtn.addEventListener("click", () => { 7 | let qrValue = qrInput.value; 8 | if (!qrValue) return; 9 | //if no input then no generation 10 | generateBtn.innerText = "Generating QR Code..."; 11 | 12 | 13 | //if the input is empty then return from here 14 | 15 | //getting qr code of user entered value using the qrserver 16 | //api and passing the api returned img src to qrImg in img section 17 | qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${qrValue}`; 18 | 19 | qrImg.addEventListener("load", () => { 20 | 21 | wrapper.classList.add("active"); 22 | generateBtn.innerText = "Generate QR Code"; 23 | 24 | 25 | }); 26 | }); 27 | 28 | 29 | qrInput.addEventListener("keyup", () => { 30 | if (!qrInput.value) { 31 | wrapper.classList.remove("active"); 32 | 33 | //if after generation shome one while remove the input from in put then qr while be also erase 34 | } 35 | }); 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # QR CODE GENERATOR JS 3 | 4 | A QR CODE GENERATOR MADE USING USING HTML,CSS AND JAVASCRIPT 5 | HAVE VISUAL DELITE VISUAL EXPERIENCE AND SMOOTH PROCESS 6 | USING API SERVER . 7 | 8 | ## Authors 9 | 10 | - [@anusthan12](https://github.com/anusthan12) 11 | collaboration with 12 | - [@abhishekxgithub](https://github.com/abhishekxgithub) 13 | 14 | 15 | { 16 | 17 | - HTML By :- - [@abhishekxgithub](https://github.com/abhishekxgithub) 18 | - CSS By :- [@abhishekxgithub](https://github.com/abhishekxgithub) 19 | - CSS (Color Palette , Animation) - [@anusthan12](https://github.com/anusthan12) 20 | - JS - [@anusthan12](https://github.com/anusthan12) 21 | 22 | } 23 | ## API Reference 24 | 25 | #### Get all items 26 | 27 | ```http 28 | GET https://api.qrserver.com 29 | ``` 30 | 31 | | Parameter | Type | Description | 32 | | :-------- | :------- | :------------------------- | 33 | | `api_key` | `string` | **Required**. Your API key | 34 | 35 | #### Get item 36 | 37 | ```http 38 | GET https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=anusthan_12 39 | ``` 40 | Here anusthan_12 is taken as an example you can take anything that you want to generate 41 | 42 | | Parameter | Type | Description | 43 | | :-------- | :------- | :-------------------------------- | 44 | | `id` | `string` | **Required**. Id of item to fetch | 45 | 46 | 47 | 48 | ## 🚀 About Me 49 | I'm a Developer... 50 | 51 | github:- 52 | - [@anusthan12](https://github.com/anusthan12) 53 | 54 | instagram 55 | - [@anusthan_12](https://www.instagram.com/anusthan_12/) 56 | 57 | 58 | 59 | ## Badges 60 | 61 | 62 | 63 | [![MIT License](https://img.shields.io/apm/l/atomic-design-ui.svg?)](https://github.com/tterb/atomic-design-ui/blob/master/LICENSEs) 64 | 65 | 66 | ## Features 67 | 68 | - After access color mode toggle 69 | - Live Generation 70 | - Fullscreen mode 71 | - Responsive 72 | 73 | 74 | # Hi, I'm Anusthan! 👋 75 | 76 | 77 | ## Other Common Github Profile Sections 78 | 👩‍💻 I'm currently a student in KIIT 79 | 80 | 🧠 I'm currently learning javascript 81 | 82 | 💬 Ask me about anything 83 | 84 | 📫 How to reach me on instagram https://www.instagram.com/anusthan_12/ 85 | 86 | ⚡️ Fun fact I even make sticker and meme other than proffectional works 87 | 88 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | 10 | 11 | body{ 12 | display: flex; 13 | padding: 0 10px; 14 | align-items: center; 15 | min-height: 100vh; 16 | background: #fabcbc; 17 | justify-content: center; 18 | 19 | 20 | } 21 | 22 | .wrapper{ 23 | height: 265px; 24 | max-width: 410px; 25 | background: #fff; 26 | border-radius: 7px; 27 | padding: 20px 25px 0; 28 | transition: height 0.2s ease ; 29 | box-shadow: 0 10px 30px rgba(0,0,0,0.1); 30 | 31 | } 32 | 33 | .wrapper.active{ 34 | height: 530px; 35 | } 36 | 37 | header h1 { 38 | font-size: 21px; 39 | font-weight: 500px; 40 | } 41 | 42 | header p { 43 | margin-top: 5px; 44 | color: #575757; 45 | font-size: 16px; 46 | } 47 | 48 | .wrapper .form { 49 | margin: 20px 0 25px; 50 | 51 | } 52 | 53 | .form :where(input, button){ 54 | width: 100%; 55 | height: 55px; 56 | border: none; 57 | outline: none; 58 | border-radius: 5px; 59 | transition: 0.1s ease; 60 | 61 | } 62 | 63 | .form input { 64 | font-size: 18px; 65 | padding: 0 17px; 66 | border: 1px solid #999; 67 | 68 | } 69 | 70 | .form input:focus{ 71 | box-shadow: 0 3px 6px rgba(0,0,0,0.13); 72 | } 73 | 74 | .form input::placeholder{ 75 | color: #999; 76 | } 77 | 78 | /* .form button { 79 | color: #fff; 80 | cursor: pointer; 81 | margin-top: 20px; 82 | font-size: 18px; 83 | background: #71a6d2; 84 | } */ 85 | 86 | 87 | 88 | 89 | .form button { 90 | margin-top: 20px; 91 | cursor: pointer; 92 | border: none; 93 | outline: none; 94 | /* background: linear-gradient(90deg, #EC37D0, #D92B2B, #FFAA0D, #EC37D0); 95 | org color */ 96 | background: linear-gradient(90deg, #ccf9ff, #7ce8ff, #55d0ff, #00acdf); 97 | background-size: 400%; 98 | color: #fff; 99 | font-size: 18px; 100 | letter-spacing: 4px; 101 | } 102 | button::before { 103 | content: ''; 104 | position: absolute; 105 | top: 0; 106 | left: 0; 107 | right: 0; 108 | bottom: 0; 109 | z-index: -1; 110 | background: linear-gradient(90deg, #EC37D0, #D92B2B, #FFAA0D, #EC37D0); 111 | 112 | 113 | background-size: 400%; 114 | border-radius: 50px; 115 | opacity: 0; 116 | transition: .5s; 117 | } 118 | button:hover { 119 | animation: animate 10s linear infinite; 120 | } 121 | button:hover::before { 122 | filter: blur(25px); 123 | opacity: .8; 124 | animation: animate 10s linear infinite; 125 | } 126 | @keyframes animate { 127 | 0% { 128 | background-position: 0%; 129 | } 130 | 100% { 131 | background-position: 400%; 132 | } 133 | } 134 | 135 | .qr-code{ 136 | opacity: 0; 137 | display: flex; 138 | padding: 33px 0; 139 | border-radius: 5px; 140 | align-items: center; 141 | pointer-events: none; 142 | justify-content: center; 143 | border: 1px solid #ccc; 144 | } 145 | /* 146 | .wrapper .qr-code { 147 | display: flex; 148 | opacity: 0; 149 | pointer-events:none; 150 | padding: 33px 0; 151 | border-radius: 5px; 152 | align-items: center; 153 | justify-content: center; 154 | border: 1px solid #ccc; 155 | 156 | } */ 157 | .wrapper.active .qr-code{ 158 | opacity: 1; 159 | pointer-events: auto ; 160 | transition: opacity 0.5s 0.05s ease; 161 | 162 | } 163 | 164 | .qr-code img{ 165 | width: 170px; 166 | } 167 | 168 | @media (max-width: 430px){ 169 | .wrapper{ 170 | height: 255px; 171 | padding: 16px 20px; 172 | } 173 | 174 | .wrapper.active{ 175 | height: 510px; 176 | 177 | } 178 | header p{ 179 | color: #696969 180 | } 181 | .form :where(inout, button){ 182 | height: 52px; 183 | } 184 | .qr-code img{ 185 | width: 160px; 186 | } 187 | } --------------------------------------------------------------------------------