Build A Password Generator With JavaScript - Tutorial

hello everyone in today's video we're gonna be building a password generator using JavaScript and this is a great project because it's not very difficult to do but there's a ton of different ways you can build this project and I'm gonna be showing you the way that is by far one of the cleanest ways to design the code so you can pick up best practice tips in JavaScript so let's get started now welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so that sounds interesting make sure you subscribe for more videos just like this one to get started I have an example of what we're going to be building over here on the right and as you can see it's just a typical password generator we can determine how many characters you want by using the scroll bar or we can actually just input it here we can include uppercase numbers symbols and then when we click generate password as you can see it's going to generate a password so obviously to get started we're gonna need an index.html page to put all of our code and if we just put exclamation point and hit enter it's going to give us the boilerplate code we can just give it a simple title of password generator and then also we're gonna need to have two other files we're gonna have a JavaScript file so that's going to be inside of a script tag and we're just going to call this script jeaious and make sure you defer this so that it loads after the body of your HTML and then we're also going to need a link tag and this is going to be for our CSS we're gonna call it styles dot CSS and let's just create those files now so we have script jeaious and we're going to have styles dot CSS just like that and now that we have that done the first thing we can work on is our HTML and to get started the very first thing I want to create is a container which is going to contain this blue box of the black border so we can just create a container div here and inside of here is going to be all of our code first we're going to have this password generator title which is just going to be an h1 tag and inside of it we're just gonna put password generator oops generate tor just like that and then also underneath of that we're going to have this section that actually contains our generated password and we're just going to put that inside of an h3 and for now we'll just default it to password so that way when you load out the page it's just going to say password and we can actually open this up with live server just to see what we have so far as you can see we have our title as well as our generated password placeholder for now the next thing we're going to have is the actual form which is going to contain all of our different input elements and if you remember we have the number of characters here so let's create a label for that and as label is going to be inside of here it's going to say number of characters and then for that individual label we're gonna have an input and this input is going to be a range input that's what gives us this slider over here that you can see and then we just want to also on top of having that range input we want to have a number input which allows us to have our number over here that we can control our range with we're gonna need JavaScript to hook that up but for now if we save this and go over here you can see we have our number input as well as this slider over here and one thing that we do need to do is actually set up some minimum values so we want a minimum of one and we want to have a maximum here of 50 and we want that both on our range and on our number input here also we need to give these IDs so we can select them in the JavaScript so let's just come in here we can say ID character amount range we're gonna do the exact same thing for our number input we're just going to call this character amount number and then we can use the ID instead of our four here and by doing that now if we save this and come over here when we vary click on our label number of characters it's gonna put our focus inside the input over here also let's just put some default values in here we're gonna say by default these are both going to be 10 so we can just say value 10 and value 10 and now as you can see both these inputs are set to 10 by default the next thing that we need to work on is adding in all these different checkboxes which is gonna be fairly simple or again going to have a label with a four attribute and inside of this label we're gonna first put here include upper case and then we're going to have an input for that and this input is going to be a type of check box and of course we want to make sure we give this an ID we're going to call this include upper case and we're gonna use the same for this is going to work exactly the same now if we click on our include upper case it'll check our box for us let's just copy this for the other ones so we can come in here and we can say that we want to include numbers and we want to change this to include numbers and lastly same exact thing but this is going to be for symbols so include symbols include symbols and include symbols now if we look over here we have pretty much all of the form inputs that we need the last thing we need to do is this generate password button so we can just create a button down here we're gonna make sure that we give it a type of submit and we want to just say generate password whoops password just like that and now as you can see over here we have all of our different form inputs correctly on the page now with all that HTML out of the way we can start working on the styles and the very first style I want to work on is the body so we can just select our body tag here and of course the very first thing that we see is our background color is just going to be this really dark black color and if we say that you see we now have that background color and of course to make our text stand out we want to make sure our text is going to be white and there we go now we can read everything much better the next thing we want to do is Center all of our content and the easiest way to do that is by using flexbox so we'll say display flex justified content in the center and we want to align our items in the center and if you're unfamiliar with flexbox i have an entire video covering it which you can find linked in the cards in the description below also to make sure we Center vertically we need to make sure we set a min height of 100 view height and that's going to fill the entire height of our screen and to get rid of this annoying scrollbar all we need to do is set our margin to zero and that's going to get rid of the scrollbar for us now lastly so that we have a font that is a little bit interesting look at we can just come into our font family here and we can just choose one of these values for example we can just go with the Georgia font and if we save you can see our font just looks a little bit more interesting there's nothing amazing but it'll work for this application next we need to actually select this wrapper div that we created which we get a class of container so instead of here we could just say a dock container and if you remember right this is going to be this giant blue box area so we want to change the background color to be that blue color which is zero zero six six whoops six six nine nine and if we save that you can see we get that blue color also we can change inside of here our padding to be three REM that we have a bunch of space around our content as well as we want a little bit of a border radius so we can get those rounded corners in our case one REM is going to work fine and then that black border is just gonna help it stand out a little bit from around the edges so we'll say two pixels of solid black as you can see we have that nice-looking border right now also we can make it so that all of our content inside of here is in the center by doing the same exact flexbox trick so we can say display flex justify content in the center and align items in the center as you can see now everything is lined up in the center but to make it vertical instead of horizontal all we need to do is change the Flex direction to column and as you can see everything went back to going in that vertical direction the next thing we need to work on is styling our form inputs because they're obviously a mess right now and the easiest way to do that is just to put a class on our form we'll just give it a class of form and we're actually going to use CSS grid for this so if you're unfamiliar with CSS grid I again have an entire video on it in the cards and the description so you make sure you check that out but essentially we want to change here the display to grid and then we want to modify the grid template columns and we want there to be two separate columns one for the label as you can see here and one for the value section we want them both just to be Auto sized so we're just going to say grid template columns auto and auto as you can see we now have two columns but there's a problem and that's because our range slider and our input are on two separate rows we want them to take up one column instead of two different columns so to do that we're just going to wrap them in a div so that way that div is going to span an entire column and these objects inside of it are going to be in that column now if we save you can see that our slider and our input are both on the same column but everything is really scrunched up right next to each other so in order to fix that we're going to add a little bit of a gap first we're going to add gap on the row we're just gonna use one REM and then we're gonna use a column gap in between our columns of three REM as you can see that really spaces out our elements and looks a lot better the last thing we need to do just make sure that our grid is centered associate justify content centered and align items in the center now that'll make sure that our grid is always inside the center of its container instead of stretching or being pushed around now what we need to do is actually style our different elements so for example this password generator title so let's just add a class to that of title whoops title just like that and now inside of our style sheet we can select that title and we can first remove the margin from it we can also make sure we text align it in the center just so everything is in the center and there we go you can see that just made that our password generator title is a little bit more squished up with our display password also we should bulb these labels so they're easier to read so we can just say label we want to make all of those a font weight of bold imagine you see that just made them a little bit easier to read let's expand our screen a little bit there we go another thing that you may notice is that our input box here is not centered with our range slider and it's also very wide considering the maximum number it's 50 it'll only ever be two digits long so in order to fix that we can just put a clasp on this wrapper container we're gonna call it character a mount container we can just copy this selector and inside of our stylesheet we can use that selector and all that we need to do is actually make sure that we set it to display of flex and then we want to align our items in the center and you'll see that's going to align these in the center vertically just like that and then we can select our input instead of here our number input so let's just add a class to that what are you just going to be number input and inside of our stylish dude we can just say whoops number input all we want to do is set the width to be two REM which is going to be about the width of two characters as you can see here and that looks a lot better now now there are only two elements left on our page to style and one of those is going to be our password input section so low again let's just add a class to that we can come in here we said our class is password whoops password display and let's copy over that class and what we need to do inside this password display is first change the background color to white because as you can see it's white so we'll say background color of white make sure we indent that properly whoops there we go and we also want the color of this to be black so that way the text will show as you can see over here now we have the white background and the black text also we need to add a little bit of padding because right now that's way too squished ups will say one REM of padding we're gonna add a border around this of one pixel and we're going to use the same color as our background there we go that looks pretty nice and we also want to make sure we manually set the height and width of this so that way if we change the size of our password it's not going to make our box grow and shrink so what we want to do is we want to make sure we have a height here of to REM essentially that'll allow us to fit two rows of text and we also want to set in here a width which is just going to be 350 pixels as you can see that box is going to take up essentially the full width of our container which looks really nice next we're going to use that same exact display Flex trick that we used all across this application to Center everything so we'll just align everything in the center and that's going to make it so that our text always shows up in the center just like this and we also want to make sure we set the word break to break all and this means that if our password extends past the end of the line it'll just break in the middle of the line like this and go on to the next row also let's set a really small quarter radius just so we have that nice-looking rounded corner we'll say 0.5 REM and if we go back to our app you can see this is already coming together now the last thing is this generate password button so we can just put a clasp on our button we'll just give it a BTN class and now instead of our style sheet we can select that BTN class and inside of here what we want is this to span two columns because we want to take up the entire width on the bottom as you can see over here so we can just say that we want our grid column to span two and that's just going to make it span two columns like that as you can see also we want to get rid of our background color so we can come in here say our back and color is going to be transparent that just makes it so we can see through our button like this also we're going to set a border on this and our border is going to be two pixels of solid white we're just going to give it that outline which is looking really nice we also want to make our text color to be white and we're going to need to put a bunch of padding on this so we'll say 0.5 REM and 1 REM that spaces that and looks pretty good a little bit hard to read those so the font weight to be bold and there we go that's a little bit easier to read change the cursor to be pointer that just makes it some way hover you get that little pointer icon instead of the normal icon and then the last thing that we need to do is just of course add in our border radius we'll just do one REM which is going to round our corners all the way around now the last thing is we want to add a hover state to this and inside our harbor state all we're gonna do is change the background color and we want to make our background just a slightly transparent white color that way we can get our blue to shine through so we're just saying six FS which is going to be white and then three three is going to give us a mostly transparent white as you can see when we hover that it's a mostly transparent weight which shows up is this nice light blue color and that's all of the CSS for our form and now we can move on to the fun part which is going to be the JavaScript so the first thing that we need to do is make it so that our slider links up with our number input over here and to do that we can just use our ID selectors from our job from our HTML so we have our character amount arranged so we can say Const character mountain range is equal to our document get element by ID we just pass it in that character amount range we can do the exact same thing but for our character amount number so we can just put character mount number and character Mountain number just like that and now we can set up event listeners on those so I character mount number add event listener we want to say on input which is any time that our input changes instead of our box we want to call a function and we're just going to call this sync character amount and we want to do the exact same thing on our range input so anytime we change our range input we also want to make sure that we call the exact same function and now we can create that function in this function of course is going to take our event argument and we can get our value which is just going to be here e target dot value and then we can set our character amount number that value equal to that value and we can do the same thing with our range just like that and now when we change our slider you see it will change our input and when we change our input you see it will also change our slider they're linked to each other which is really nice the next thing we need to do is set up our form so that when we click generate password it'll actually generate a password instead of just refreshing our page so the easiest way to do that is if we put on an ID on our form we'll just say here ID it's going to be equal to password generator Creator form just like that and now inside of our JavaScript we can say that our form it's going to be equal to document dot get element by ID of password generator form and then we can set up a simple event listener or you want to listen for the submit event so any time we try to submit our form we're going to call this function and it's going to take an event and all we want to do is say e dot prevent default this is going to stop our form from submitting and refresh in our page so now if we change this click generate password you see that nothing's actually happening because we're preventing the default but not actually doing anything the next thing we want to do in here is we want to get a password variable and we want to get it from some function which we're just gonna call generate password and this generate password function is going to take the number of characters so we can say character amount it's going to take if we want to include uppercase it's also going to take if we include numbers and lastly it'll take if we include symbols so to get these variables we just need to pull them from the values inside of our page here so we get our character amount from our character amount number so we can say character amount is equal to character amount number value but we need to get selectors for all of our other elements so as you see we have our include uppercase ID for our input here so we can just say it Const include uppercase element equals document dot get element by ID and we'll just pass it in that ID and then instead of here we can say that our include upper case is going to be equal to include upper case element dot checked and this just tells us true or false if the button is checked and we can do this two more times we want to do this for include numbers and we also want to do this for include symbols and we're going to name the variables exactly the same so this will be include numbers element and this is going to be include symbols element and we can just copy this upper case so this will be include numbers make sure that's spelled correctly whoops so include numbers and this one will be include symbols just like that and of course we need to change it over here to include numbers and include symbols now when we call this function which we haven't created yet we're going to be passing in all the values from our form here that we have based on our check boxes and based on our input from our characters so let's just create that function generate password and as we know it's gonna take a character mount it's going to take and include uppercase include numbers and include symbols and inside of this function we're gonna do all of our code for generating our password and this right here is really where you can go a ton of different ways with the code but I'm going to show you the cleanest way to write this code and that is using character codes so if we pull up this sheet over here this is going to be all of the character codes for all of the ASCII characters and as you can see we have our uppercase numbers are lowercase numbers we have our numbers here as well as all these different special symbols that we can use and what we can do is we can actually change from this number 65 to this string character by just using string dot from char code and if we pass in 65 here it's actually going to give us an uppercase a if we passed an 82 it's going to give us an uppercase R and so on so if we create a list of all the character codes that we can use then we can just write a simple for loop and loop over it a bunch of times to create all the characters of our password and that is so much easier than writing out an array that says a and then it's going to have the inside of it and so on like this that takes a lot of work and it's not very clean so in this way we're gonna have a much cleaner code set up by just using these numbers instead of using an array of strings and we can actually use a function to generate our race for us so we can just say array here from high to low we're gonna pass it in the low value and the high value let's actually just name this from low to high makes a little bit more sense there we go and inside of here all we need to do is create a simple for loop that's going to go from a variable I that is equal to low it's going to add one each time until it gets to the point that it is the high number just like this so essentially we're looping through all of the different variables between our low number and our high number and we're gonna put this inside of this empty array right here so we can just say array dot push and we want to push in I and then of course return our array so now this function January so it's an array from our low number to our high number so up here we can create a variable we're just going to call this upper case char codes this is going to be equal to array from low to high and as you can see 65 is our lowest upper case number and our highest upper case number is ninety down here so let's put in 90 and now we have all of our uppercase character codes inside of this list from 65 to 90 let's do the same thing with the lower case because by default we're going to use the lower case passwords and that's 97 to 122 so you say 97 1 22 just like that and now we already have a lot of the code set up let's do our numbers as well this is 48 to 57 so let's copy this same number character codes and that is going to be as I mentioned oops 48 to 57 now lastly we have our symbol character codes oops symbol and this is going to be slightly differently because there's actually quite a few gaps first we have 33 to 47 which is a bunch of different symbols so we can come in here 33 247 but we want to make sure we concatenate a new array onto that because we also want to get all these values from 58 to 64 so we can say the exact same thing all of these arrays but what is it from 58 to 64 we also want to get these values from 91 to 96 so we can do another concatenation and we want to get the arrays here from 91 to 96 and then lastly we want to get these 123 to 126 so again we're just going to concatenate that on this is going to be an array from low to high of 123 to 126 now we have all of our different arrays of character codes and to show you what's actually working instead of here I'm just going to console dot log out for example our lowercase character codes and now if I inspect this and I click on the generate password button you can see we get all of our character codes 65 to 90 which is all of our lowercase character codes and this is the same for all of our different arrays here that we created for lowercase uppercase numbers and symbols and now in this function we can create an overall list of all of our character codes and then loop through and just randomly choose one each time so the first thing we want to do is set up our variable which is going to be here our character codes so we can set our codes and we want to default this to our lowercase character codes and then we want to append on our include uppercase so if we for example are including our uppercase then now char codes is going to be equal to CH our codes dot concat our uppercase character codes just like that and we can do the exact same thing for our numbers so let's say include numbers and we want to concatenate on whoops our number character codes just like that and lastly we want to do include symbols and this is going to be our symbol character codes now our character code is going to be a list of all of the possible character codes that we can generate and all we need to do is just loop for all of our different character maps so we can just come in here we can say let I equals zero when I is less than our character amount whoops character amount and we just want to add one each time this is going to loop once for each character and we're gonna need a variable which is going to store all of our passwords so we'll say password care right characters that's just going to be an empty array and then instead of our loop we can just say password characters dot push and we want to push our character but in order to get that character we just need to get a random value from our list of character codes as you can see here so we can say our character is going to be equal to character codes and we want to get a single index and what we want to do is say math dot four of map that random and what we want to do is we want to get a random number and then we want to multiply that random number times our character amount and now this code looks a little bit confusing but essentially what it's doing is this getting a random number between 0 and our character amount and then it's making sure that it's an integer by doing math dot floor and then it's going to give us our character code so this is actually going to be a character code here now what we want to do is actually change our character code by doing string dot from char code we're gonna pass in our character code just like that and now we can return our password characters we want to of course turn that into a string so we're going to join on an empty string but essentially you're going to turn our write into a string and inside of here all we need to do is just set our password text here so let's come back into here and give our password display an ID of password display that way we can select it in our JavaScript and we can come in here this is going to be our password display and we want to set it to our password display ID and then we can say password display dot inner text is just going to be equal to our password and now if we click generate password you can see we get ten characters here but obviously these are upper case instead of lower case so it looks like I have our character codes swapped so these are going to be our lower case these are going to be our upper case and now let's check that you can see we get lower case if we include the upper case characters you can see we're going to get a combination of upper case and lower case but of course that's also not working so it looks like somewhere in our code down here we have a problem and if we take a look here it looks like the issue is that I'm actually using character amount so this is only giving us a number between one and the number of characters we specify but we actually want to get a number between one and our charge codes dot length this is essentially going to give us any character inside this character codes array now if we include uppercase click generate you can see we're getting the upper case and lower case if we do numbers we'll scale this up you can see we're getting some numbers inside of here we got a seven there for example we do it again we get even more numbers and lastly if we include symbols we're getting a bunch of symbols of our case lower case and numbers which is an incredibly secure password and that's all there is to this really simple password generator if you enjoyed this video check out my other videos linked over here and subscribe to the channel for more videos just like this one thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 39,214

Keywords: webdevsimplified, javascript es6, javascript, js, javascript tutorial, js tutorial, javascript es6 tutorial, javascript project, javascript project tutorial, javascript fun project, javascript tutorial for beginners, javascript project for beginners, js project, js project tutorial, js for beginners, js tutorial for beginners, web development, js password generator, javascript password generator, password generator tutorial, js password generator tutorial, password generator app

Id: iKo9pDKKHnc

Length: 27min 52sec (1672 seconds)

Published: Sat Dec 21 2019