# How to make your QR Code Generator using HTML, CSS & JavaScript ## Hey all 🤘! So I am back again! This time we have a little different project to build and it's an easy one. I discovered that this was interesting and indeed it is! I will teach you how you can make your own QR Code Generator using HTML, CSS, and JavaScript! ![](https://media0.giphy.com/media/5zf2M4HgjjWszLd4a5/giphy.gif align="left") ## HTML The HTML we need is very very straightforward! What we need in this case is this: ```xml QR Code Generator

QR Code Generator

``` * We add some attributes to the input to select it in JavaScript, we remove spellcheck from the input so any spelling is valid and we add a default value for the input. * We add `
` with an `id` of `qrcode` to use it in JavaScript and output the QR Code * We create the ` ``` Then, we use the `QRCode` constructor to create an instance of it. Which comes along with the `qrcode.js` library we added the script for. We pass in the `
` with the `id` of `qrcode` in the constructor And we use the `makeCode` method to embed the `value` of the input in a QR Code. > The `trim()` method helps in removing extra space before and after a string ```javascript const qrcode = document.getElementById("qrcode"); const textInput = document.getElementById("text"); const qr = new QRCode(qrcode); qr.makeCode(textInput.value.trim()); ``` Now, whenever the user types into the input, we generate the QR Code again using the `makeCode` method. We use the `oninput` event on the `textInput` element for that. We get an event object with the function, we use the `e.target.value` to get the current value of the input and generate the QR Code accordingly! ```javascript textInput.oninput = (e) => { qr.makeCode(e.target.value.trim()); }; ``` Here is the final code for the QR Code generator: https://easypastes.tk/pastes/qrcode-gen I hope you liked it! Comment down your thoughts! There is always room for improvement so let me know your suggestions on this project! **Connect with me on my** [**YouTube channel**](https://youtube.com/MaxProgramming) **and my** [**Twitter**](https://twitter.com/maxprogramming1) **😉** Until next time, keeping awesome ✌️