Create A Simple JavaScript App to Generate QR Codes

Key Takeaways

[Music] what's going on guys in this video we're going to create a qr code generator with vanilla javascript now what made me think of this project is the other day i went out to breakfast with my family and at the restaurant and i've seen this at many restaurants they have a qr code for you to scan and then it opens up their menu and you can order basically you can pre-order so that they have it ready for you when you get up there in the line so i i thought why not create something to allow people to make these these qr codes and i created this qr code generator where we can enter a url this might be like like i said like a restaurant menu or something we can choose the size and we can generate the code so now if you scan this with your phone it's going to open up that url we can also save it as an image you can print it out whatever so very very simple it took me about four or five hours to to create this and deploy it it's at qrcodes.tech right now so before we get into building this i just want to talk a little bit about side projects because this is this is a good example of a very simple side project that could bring you some monthly recurring revenue you know if you were to add some do some seo and then add some google adsense on the page you might be able to make a few bucks per month i mean it's definitely not going to be a gold mine there are a lot of other qr code generators so it's not like an innovative idea but it is something that you could put up you know even if it's just to put on your your portfolio or resume i would encourage you to do small projects like this you know not every project has to be this big endeavor that takes up all your time so just something to think about and that's that's even if your your goal is to become a developer at a big tech company it's nice to have these little side projects all right so as far as how we're going to build this like i said we're using vanilla javascript if you want to use a framework you could but i'm not really going to scale this up and you know i'm not going to add any more features to it so why even use a framework it's only about 70 lines of code or so all right and we're going to use tailwind for the for the whole ui for the design so we won't be writing any css but we will be using tailwind classes so this is a library that i found qr code js which is very simple all you have to do is is create this qr code object add the url that you want to open add the the size the color and it it generates it puts it on the page so initially i was just going to show you how to do that but i figured it's so easy i wanted to do something a little more in depth so i went ahead and created an application where you can put in the url in a form as well as the size and generate it and also download it as an image and then i have the repo right here i'll have the link to that in the description if you want to grab the the images or anything but yeah so i figured it'd be a nice little project so that's it let's go ahead and get started alright guys so i have vs code open and all i've done is created an index html which is completely empty and then in my js folder i have a script js which is also completely empty and then an img folder with my images and you can get those from the um from the repo in fact you don't need the screenshot i mean you can keep it if you want but you don't need it all right so to get started here let's go into our index.html and create an html5 boilerplate and then for the title we're going to say qr code generator and then we want to link our our script that's in the js folder so let's go ahead and say script source and we want to bring in js script js and since i put it at the top i'm going to use defer all right and then in the body just for now i'll put an h1 save that and you can just open up the index html on your file system or if you're using vs code you can use an extension called live server which is what i'm using so i'm just going to say open with live server and that will open it on port 5500 by default all right and i'm just going to leave the finished product here just for just for reference as far as the ui we don't have a a style sheet here because we're going to be using tailwind and we're just going to use tail in classes so if you go to tailwindcss.com and then get started there's a few ways to get started if you want to use the cli you can i'm going to just use the cdn just to keep it simple so i'm going to grab that script tag right here and let's put it right above our script tag and then i do want to use a different font i'm going to be using the poppins font so to do that without having to you know add some css and say body and then font family we can use the config object so i'm going to grab the script tag that has this tailwind config object and we'll put this right under that and then we're just going to get rid of this colors here and let's say font family which is going to be an object and then this is for the sans font so we want to say sans and whoops that should be in in the damn object so let's say sans and that's going to be an array with the fonts we want to add so let's say poppins and sans dash serif all right so we'll save that and now we should have the poppins font all right so the next thing we need is the qr code library so this right here qr code js this allows us to create a qr code object now on in the documentation here whether it's this page or the the github they don't really show you how to add it so there's no cdn so what i did is i went to cdnjs.com and searched for qr code and it came up right here so i'm just gonna right here it says copy script tag i'm just gonna click on that and then i'll go ahead and put this right here and we'll paste that in and now we should be able to use that library all right so that should be it for like the head and anything we have to any dependencies that we have to include so now we can start to work on the layout which isn't going to be too bad we have just a header here or a nav bar if you want to call it that there's no navigation but you know just the header and then this is going to be a flexbox and this will be the first flex item the text and the form and this will be the second flex item which is just the image and then once we generate a code we're gonna we're gonna add the spinner functionality with javascript and then the code will be shown down here with the button to save it as an image all right so let's get started with the with the header so i'm going to go right into the body here let's get rid of that and let's say header and actually trying to think if i should add the classes as we go because there is quite a bit any of you guys that have used tailwind you know that there are a lot of classes so and this is not a tailwind course i have a full 12-hour uh udemy course on tailwind i'll put the link to that in the description i also have a crash course and plenty of other tailwind videos but i will explain kind of what what these do as i go along so let's say bg red 500 that's going to be the background color of this header and then i want padding so i'm going to do p dash 4 that's padding all around and then margin bottom 10 okay and then in the header i want a container because i don't want it you know the i don't want this to be all the way over here you know when we make the screen really big or the browser really big so let's add a class of max with max w we'll do 5xl and then let's do margin auto to put it in the middle and then for the text we're going to have a class of text excel extra large we want to bold the text so we'll say font bold and then i also want the text to be white so text white and then the text itself will just say qr code generator all right so let's save that and there we go now we have our header so next we want under the header i'm going to add a main tag and then we want our flexbox so when we when we create responsive layouts with tailwind it's mobile first and we can use classes like if i say md and then i want to use the class of flex row like that what will happen is this class will only apply when the screen or the browser is the medium whatever that medium size is and then up okay so medium screens and up would get this class so keep that in mind because we want to do this we want to make this responsive so what i'm going to do is add a class of flex which turns it to a flexbox i'm going to say flex dash call dash reverse because by default or i should say on small screens i want it to be a column i also want it to be reversed because i want the image to be on top right so if we look at that the image is on top now if i don't do reverse if i just do flex call then the image is going to be on bottom when it's a column okay so let's say flex call reverse and let's come back over here i want to align the items to the center so we can use align center justify content to center so justify center and then margin auto and then on medium screens so on medium screens i are in up i want to use max let's say max dash with dash 4 xl and then also on medium screens and up i want this to be a flex row and go horizontal okay so that's our flexbox and then what we'll do is we'll have these two divs let's just say div one for now and then another div and we'll say div two and if we save that you can see it's a column but once i hit once i hit that medium screen it turns into a row and they're side by side so that's what i want now as far as the width for both of these if we look at medium screens and up i want this to be two-thirds and this to be one-third so what we'll do is add let's say class and it's going to be width full to begin with meaning it takes up the entire thing but then on medium screens we want the width to be one not one half we want the width to be two thirds this is the first div i'm also going to add some margin on the right so let's say margin right 24. and then for this div say class we want it to be with full to begin with so mobile first and then medium screens we want it to be with dash one third okay i think that's all i want here i also want to add the class of self center which will do align self and set that to center okay so yeah there we go and again you go down under medium screens and they're going to stack so now the second div is going to be an image so we might as well just add that real quick so i'll say image the source is going to be image slash qr code and then let's add a couple classes here so basically the image i want it to take up half uh let's just see what it looks like if i save so i mean that looks okay but obviously i want this to be a little smaller so what we'll do is we'll set the width to one half okay so that's two to begin with and then let's move it to the middle so we'll say margin auto and then on medium screens and up we can then set it back to false so with fall and let's also add some margin bottom i'm going to put that right here so mb10 yeah all right good so if i make this bigger yeah i think that's good that takes care of the image now for the the text in the form that's going to go in this first div first flex item here so the first thing we want is the heading so let's do an h1 and let's say text dash 3xl and let's do font dash bold and margin we'll do margin bottom five and then on medium screens we'll make the text a little bigger so let's say text dash we'll do 4xl okay and then that's going to just say qr code generator so we'll save that okay so underneath the heading we're going to have a couple paragraphs so let's go under that and this paragraph i'm just going to give it a class of mb4 to push the other one down and then i'll just copy the text and paste that in you guys can just type that out and then there'll be another paragraph under it and i'm just going to grab that text real quick okay we'll save that good now i do want to have some padding why am i why don't i have any padding on this let's see yeah so on this div right here the flex div let's add let's say p dab oops p dash 10 there we go okay so back down here we want to go under this this last paragraph and now we're going to add the form so let's say form i'm going to give it an id of generate we'll say generate dash form and then as far as classes go i'm just going to do a margin top four and we don't need an action attribute we can get rid of that okay so now inside the form here we're going to have a text input for the url we'll actually we'll use the url type but then we have a bunch of classes so we're going to do with full let's say border dash 2 and the border color we'll do border dash gray 200 let's make it rounded and padding 3 and then for the text we'll do text gray text grade doc and let's say margin right 2 and then in the focus state i want to remove the outline so i'm going to say focus colon outline none and then let's say margin bottom five okay so that's the classes oops let's save that all right and then i'm just going to add on to that in id because we need to access this from the javascript so for the id let's say url and then i'm also going to change the type to url as well and then we'll add a placeholder as well so let's say placeholder will say enter enter a url all right so there's our url input next we want to select with the size so still within the form tag let's say select and i'm going to add some classes actually we can probably just copy yeah we'll just copy all these classes and we don't need a name the id is going to be size let's say class equals and then we'll paste in all those classes except for the mb5 we don't need that all right now with within the select we want to have our options so let's say option the value for this is going to be 100 and then for the text we'll say 100 by 100 and then we'll copy this down a bunch so we want 200 2 and then 3. actually i'm just going to paste this in okay so we just have 100 to 700 if you want to change these up you can and i'm going to select 300 by default then we just need the button so underneath the select let's say button and let's do a bg dash gray 600 let's do rounded and the width we'll do full text color will be white and let's do padding on the y-axis 3 and padding on the x-axis 4 top five and then on the hover state i'm going to change the bg to black okay and then let's just add in here a type of submit and then we'll say generate qr code all right cool so yeah that should really do it as far as the the top section yep so that looks good now down below it is where the the qr code is going to generate so we want to keep that within the main tag but we want to go underneath that flex div that we created so i'll just say like this is the where the generated uh qr code will go okay so this div is going to have a container so let's do max with 5xl and margin i'm going to do margin auto let's make it a flexbox but we're going to make it a flex column and then we want a text center align center justify center and margin top 20. now there's going to be two things that go in here there's going to be our spinner and it's going to be we'll say qr code output okay now the qr code output is simple it's just going to be an id of qr code i'm also going to give it a class of m auto to center it and then that's basically the placeholder for the generated code now the spinner is going to be an svg and it's quite a bit so if you go to the the repo link in the description you can just copy the spinner div that has the svg in it so i'll just paste that in let's just uh space this out a bit here so yeah i'll paste that in and basically we just have oops i don't want two of these we basically just have a div with the id of spinner and then inside that is the svg and if you want to change like the the color and stuff like that you can change up these attributes if you want and then we also have just a span with the class of sr only that says loading and that's it so let's save that we should see the spinner now we are gonna in our javascript work we can set this to hide the spinner um but you might get a little flicker so what i'm going to do is just add in some style tags up here let's go right above the title just to hide that spinner by default so we'll just grab it by the id and say spinner and then display none all right so that way it doesn't show it doesn't even show it doesn't flicker or anything all right so now we're ready for the javascript so let's jump into our script js and first thing i'm going to do is just bring in a couple things we want to bring in the form so i'll just say document.getelementbyd and i believe it's generate dash form is the id and then we're also going to bring in the qr code div which is where we want to embed it so qr code and then let's just variable here i'll call it qr all right now on the form we want to add an event listener so we want to listen for a submit and when that happens we'll say let's say on generate submit for the function and then we'll go ahead and create that up here i'm going to use arrow functions but if you want to use regular functions that's absolutely fine okay we want to prevent the default behavior because it's a form submission and then let's get the form inputs so the url we'll say document.getelementbyd and that's going to be the id of url since it's an input we need to get the value of it not just the not just the element all right and then we'll copy that down and we want to get the size which is the select box that has an id of size as well and then let's just do a console logs some reason that isn't working say console.log of url and size all right so let's save that if i come down here and since i'm using the tailwind cdn it does give us this warning but you can just ignore that so i'm going to put a url in here with the size and you can see that it's logging that good so next thing um i do want let's just do a little bit of validation here we're going to say if url is equal to an empty string then i'm just going to show an alert i might add a custom alert box later on but for now we'll just do this we'll say please enter a url okay and then else if they do enter a url i do want to show the spinner so what i'm going to do is right under the on generate form or on generate submit let's say const show spinner okay and all we want to do here is select the spinner so we'll say document get element by d spinner and we want to set the style of display to block okay so that's going to show it and then what we'll do is copy this down and let's change the name of this to hide spinner and all we're going to do is change that to none okay and i know we put the css in but i'm just going to call hide spinner to begin with all right and then down here up here in the else this is where we want to show the spinner all right so if i save that and we come over here and i click well first of all let's check the validation that shouldn't let me submit if i do put something in and click now we have the spinner showing okay now i and again the spinner is completely optional i think it's just a nice ui effect but i'm going to show it for one second so i want to add a set timeout here so set timeout takes in a function so i'm going to add an arrow function and the second argument that's passed in to set timeout is the number of milliseconds you want to wait i'm going to say 1000 which is one second okay and then i want to hide the spinner so let's save that and if we try to submit this again oops you'll see it shows the spinner for for one second all right so now what we want to do is generate the qr code and that's where this library comes in so qr code js and all we have to do is create this object using new qr code takes in wherever you want to put it so the the element and then it takes in an object with this information here the text which is the url you want to open the width and height you can also do color dark color light but we're not going to do that in this particular project if you want to add like a color input and do that you could so let's create a separate function for this we'll call it generate qr code and that's going to actually take in a url and a size and then we want to create a variable we'll say qr code and set that to new qr code that's how it is right let's see yep all right and then we're going to pass in the id that we want to use which is qr code and then an object with a text value and that's going to be the url that's going to come from the form but it's going to be passed into this function as an argument and then we can do a width which is going to be the size right and then the height which is also going to be the size okay and that's all we need here so let's save that and then let's see we want to run this function right after we show the spinner um yeah so [Music] i'm sorry right after we hide the spinner so we hide the spinner and then we call generate qr code and we want to pass in the url in size which comes from here comes from the form so let's try it out we'll save it and let's go ahead and put in a url okay the spinner shows for a second and then it generates the code if we want to do like a hundred okay so we have an issue right now which is it's showing it's gonna just keep that there so we need to clear the ui or clear the code um you know before we do anything so let's uh let's create a function we'll just go right here let's say const and i'm going to call this clear ui because we're also going to have a save button that we need to clear as well but for now let's just set qr which we brought in up here so qr code we're going to set let's say dot inner html and set it to nothing and then where i'm going to call this is in the right here on generate submit i want to do this before anything so clear ui let's try it again okay so we get the code now if i want to do another one let's say a hundred clears the ui first and then generates the qr code okay so we have that working now the last thing we want to do is the button so the button i didn't add to the html because we're going to create it from the javascript using create element it's actually a link not a button but let's go down here and we're going to create a new function here let's call it create save btn and we're going to pass in save url okay now let me actually let me just finish this first all right so i'm just going to show you real quick if i generate a code and we open up our dev tools and i go to elements i just want to show you if we examine this we have the canvas element and then we have the image element here which has a source of this this data image slash png and it's just it's a lot but that that's the url that we want to get okay so when we we're going to get the url up above but we're going to pass it into this function and basically we want to make that the href value of this link that we're creating and that will allow us to click the button and download it as an image now we could right click and say save image as if you i mean you could just have a message that says that right click save image as but i think it's a little more convenient to just have a button to click to download all right so the url is going to get passed into this now we want to create the link so i'm going to create a variable here called link and we're going to set that to document dot and then create element and the element we want to create is an a tag a link okay then i'm going to add on to that link in id we'll just give it an id of save dash link okay i want to add on to that some classes because i want it to be styled so let's say class list and then we can just add in a bunch of classes here so i'll say bg dash red dash 500 so same as the header on hover let's do bg dash red dash 700 and we'll do text dash white font dash bold and padding on the y-axis too make it rounded and we'll do a width of let's say one-third wounded no rounded so width of one-third and then margin auto and my dash five all right so those are the classes that i want to add and then like i said the href is going to be the save url so yeah we'll do save url and then link dot download we're going to set that to qr code and then the inner html so link dot inner html uh we'll do save image all right and then finally we want to put it into the dom so document dot get element by d i'm gonna put it within the actually did i add a class of generated i didn't so this div that wraps around the spinner and the qr code output i'm going to add let's do an id actually we'll say id generated okay so that way we can come down here say get element by d generated and then we want to append child and we want to append that link all right so right now nothing's going to happen because we've just created the function to create the button where we want to actually call this function is up here all right now just to kind of quickly go over this when we submit the form we get the url and the size check for the url if it's there we show the spinner we hide the spinner after after one second we call generate qr code which then puts the qr code on the screen now after that we want to output the button but there's there's a little trick to this because the url to the image that we need to pass into the create save you know to this right here create save button it's not going to be available to us right away so what we can do to get around that is just do another set timeout and that's going to take in a function and the second argument is the number of milliseconds that we want to take and we'll just say 50. so it'll be really quick and then that image should be available to us so what we'll do is create a variable let's call it save url and we want to from the qr element which is the qr code id element where the code is actually output we want to run query selector on that because we want the image that's inside of it and we want the address to that image or the source okay then we can finally create the save button and then we can pass in the save url all right so let's say let's go ahead and save that now we are going to have one more issue i'll show you that in a second but let's go ahead and just click a url choose a size generate now we can see the button and if we click it it downloads the image okay now if i want to do something else like let's say google say 400 and i generate so it generates and we get the button but the old button is still there so we have to clear that out that's something that you when you're using vanilla javascript you really have to be aware of you know what what's on the screen because you have to manually take care of that and remove it where when you're using frameworks the framework does a lot of that for you or gives you a lot of helpers for you to do that stuff but all we have to do is go into clear ui right we already have the function that runs and it clears out the qr code itself now we just want to do the button so let's say const save btn and we want to get it with document.getelementbyd and remember we gave it an id right here of save link maybe we should call this save save link say save button whatever but we want to get it save dash link and then we'll just check for it so we'll say if save link then let's go ahead and um we'll say save link and then we'll call the remove method we'll just remove it from the dom completely all right so now let's try it again get our qr code we get the image if i do another one let's do 600 generate okay so now we only have one button if i click that that should work all right because it clears the ui it gets rid of the old qr code and it gets rid of the button right here and then it proceeds to to do everything else all right guys so that's it and obviously to test this out just scan it with your phone uh so if you open up the camera app and scan it you should be able to open it in a browser and if you print this out on paper or you download it as an image you should be able to do the same thing all right so i mean it's a very simple project but i think it is useful and i want you to just keep in mind what i said at the beginning of this tutorial about creating your own side projects because i i think it can be beneficial for many different reasons alright so hope you enjoyed this and i'll see you in the next one