Hi everyone, welcome back to iostack. Today, we are diving into something truly exciting. Have you ever wondered about creating your very own QR code generator? Well, today’s your lucky day! In this live coding session, we will not be going at it alone. We are pairing up with none other than Chat CPT, the advanced AI language model by OpenAI. With ChatGPT’s guidance, we will navigate the challenges and entry cases of building the tool from scratch. So, whether you are here to learn, get inspired, or simply see how AI can aid in development, you are in for a treat. Let’s get coding!
So, this is ChatGPT4 that I will be using to generate this QR code. Let’s write our prompt: ‘Create a QR code generator with HTML, CSS, and JavaScript.’
Okay, let’s see. As it is saying, creating a simple QR code generator requires a library or service to generate QR codes. One of the most popular libraries to generate QR codes with JavaScript is QRCode.js.
So, we can check this library. Let’s try it in the browser and see how this library looks like. Let’s search it in a new tab.
So, this is the library that is available on GitHub. It has the basic documentation that you can read and the basic usage. This is how it will generate a QR code. Let’s now try it.
Let me copy the code for the HTML, and I am going to create a folder for this project. Let me try a different folder name because that is already being used. Okay, let’s open this project in VS Code, that will be my editor that I would be using.
Okay, the project has been opened in VS Code. Now, I will generate the index.html file and paste the code that we just copied from ChatGPT.
So, this is the code. I will go through this code quickly. You can see we have a link tag that targets the styles.css. We have a container, a heading, a text area, and a button to generate the code. We also have a div where we will display the QR code.
We also need to create these files: styles.css and script.js. So, let’s add the code in those files. Okay, files are created. Now, let’s copy this CSS code and paste it in the styles.css file. Save it. Now, copy this JavaScript code and paste it in the script.js file.
Alright, now let’s run this index.html file in the browser. I’m using the Live Server VS Code extension to run it. So, let’s type something like ‘Hello World’ in this text area and generate the QR code.
You can see it just created a QR code within a second, less than almost one second. Now, we will try to decode this QR code to verify if it really contains the string that we used to generate it. For that, we will find an online tool that allows us to decrypt or decode the QR code.
There are many online tools available. Let’s try one of them. It needs us to upload the QR code. So, I will save this image. Okay, now let’s upload it. And you can see in this text area, it is showing the text that is inside that QR code. It says ‘Hello World’.
So, that’s it! We just generated a very useful QR code generator.
This is a new series that I just started on my YouTube channel, where I will be doing a lot of experiments and learning things with ChatGPT. I will be developing different interesting applications, little tools, and scripts with the help of ChatGPT. If you want to join me in this journey and learn how to use ChatGPT to generate anything, you can subscribe to my YouTube channel and click on the bell icon to get notified for my upcoming videos.
I hope that this video was useful for you. Thanks for watching, and see you next time!
