JavaScript Password Generator

[Music] this video is sponsored by Linode build your next application a website with all nodes next generation network Lenovo lets you pay as you go as you can fearlessly scale up or down at one of eleven global data centers to get $20 towards your new account visit linda.com slash traversée hey what's going on guys so I got a cool little project for you today we're gonna build a password generator where we can select the length of the password we can choose to include uppercase letters in the password lowercase letters numbers and symbols and we can generate that password and keep generating it and if we uncheck for instance numbers and symbols then we're only gonna get the uppercase and lowercase letters and we can also copy it to the clipboard all right so it's a cool little project we're gonna focus mostly on the JavaScript a lot of times I'll do a project from scratch and type out all the HTML and CSS but I really want to focus on the JavaScript because I think it will kind of improve your skills a little bit there's some algorithmic type elements to to the code and I think that you'll enjoy it so this is actually a user submitted project by a friend of mine Florin pop who is a fantastic front-end developer I'm gonna put his website in the description he has a blog he has you know a Twitter account that's pretty popular and he always has really helpful tweets and questions and stuff so I'd suggest following him and he has this hundred days 100 projects challenge which is really cool you can read more about it here and then he has all the lists the list of past projects which up to date is 33 projects and they're all like small JavaScript CSS projects no frameworks as far as I know and we're doing number thirteen which is the password generator and all of these will actually take you to the code pen where you can see all the code so I'll have that I love this link in the description as well all right so you can grab the HTML on the CSS so we're gonna jump into vs code and you can see I have three files index.html main Jas and style.css and the HTML and CSS are already filled in we have a blank mange that's what we're gonna be working on but I do want to just go over the HTML real quick let me just open up let me open up the other browser here I have this yeah so I have this open over here so basically we're just including the style sheet using font awesome for the clipboard icon and then we have a container class that wraps around everything so basically this box here we have a result container which is this area where the generated password will go it's gonna be output in a span with the ID of result and then we have the clipboard button with an ID of clipboard and the font awesome icon and then we have settings and then each of these here will have their wrapped in a class of setting so we have the length ID length which is the type number it's an insane number input and then the rest are check boxes with the ID of uppercase lowercase numbers and symbols and then finally we have our button with the ID of generate okay just to give you an idea of the structure of the markup and then if you want to check out the style sheet it's it's not too bad it's pretty easy we're using this Molly font and let's say we're using flexbox to kind of Center everything into the middle just some margin stuff the container has a box shadow the result container which is that area here and we're just using flexbox to align stuff so it's only 92 lines of CSS but yes so you can just grab that from the code pen so I want to focus on the JavaScript so we're gonna open up main j/s and I'm not just gonna write the code like in a linear top-to-bottom way just I mean you guys can see the code that's not very helpful I want to do this in a way where I explain exactly what I'm doing so you can really grasp it so the first thing that we're gonna do is is take care of this stuff this functionality where we need to be able to generate random uppercase letters lowercase letters numbers and symbols so we're gonna have four different functions that do just that so let's work on that first so we'll say generator functions and we're gonna want let's let's do the first one as they function get random lower okay and the purpose of this is going to be to just generate a random lowercase letter now before we add anything to the function I just want to kind of show you explain what we're gonna do here and I really liked Florin solution it's which is one line of code it's really clean so let's console.log here I just want to show you on the string object we have a method called from char code and we can get certain characters based on their code for instance 97 is a lowercase a so if I save this down here on the console you'll see that we get an A and I want to show you this link actually I'll put this this link right here why is this still say code bad let me just reload this okay so this link here shows you all the different codes for the characters and you can see that 97 is a lowercase a ok so we have the code here and then the character to the right an uppercase a is 65 the number 1 is 49 so just keep this in mind this this character set when we're dealing with this now we want to generate a lowercase letter which is number 97 to number 122 A to Z all right so what I'm gonna do let's actually take that and put that in here cuz this is what we're going to end up using except of course we don't want to always return a lowercase a so what we can do is we can use math dot random and I know most of you know what many of you know what this does it'll generate a random decimal okay so 0.3 0.5 0.4 now we don't want decimals obviously we want whole numbers so we can multiply this by the limit that we want to set so we want to go up to 26 right because there's 26 letters in the alphabet so if I save this now we get a decimal between 1:26 okay now obviously we don't want a decimal we want a whole number so we'll wrap this in math dot floor which will round down okay so we'll just wrap this whole thing here and now we get 7 11 21 18 so this is going to represent you know letters of the alphabet now these codes aren't correct if we you you know there isn't even a 13 here we we want to get from 97 to 122 as far as the code so all we have to do is add a random number between 1 and 26 to 97 so now if I go back and reload 114 101 on 14 112 107 108 so it's all within this range the lowercase letter range so let's simply take this this whole expression here and paste this into the from char code and then we'll console.log the function here gets random lower and see what we get we get lowercase T X Z F so it's just going to be it's always going to be a lowercase letter okay so I think it's a really elegant solution to to do this now to get an uppercase it's going to be very very similar so we'll just paste this in and change this to get random upper now if we look at the chart here the uppercase a starts at 65 okay so what we want to do there's still 26 letters right there just uppercase so we want to just add 65 and we're gonna get a random number between you know in this range so let's reload we get oops we need to change this here to upper and now we get an uppercase our v-a so you can see it's always gonna be an uppercase letter alright so now for numbers if we look at the chart we have number one which okay so we'll actually want to include zero so zero star at 48 and we want to go up to nine so we want to go up to 57 all right so we actually want a span of ten as opposed to 26 so what we'll do is copy this and let's say get random number and from character code instead of 26 we're going to use 10 okay because as we're doing 0 through 10 0 through 9 and we want to start at 48 so we're gonna change this to 48 all right and let's just do our console log of get random number and now if we go when we reload see we get a random number all right using that same type of method so the last thing is to get a random symbol so let's create a function called get random symbol and then what I'm gonna do here is paste in a string actually let me just grab this real quick so we're gonna have a string here say Const symbols and set that to a string of symbols and you can add symbols or take away symbols whatever you want to be available put in this string and then we're not going to use this from character code anymore what we'll do is return symbols and in JavaScript you can get a character of a string like you could with an array so if I do like zero returns symbols zero and we go down here we say get random symbol and we take a look we get the first character which is exclamation if I do one we should get the at symbol okay and then what I'm going to do here is in this in the brackets instead of just hard coding a number we're gonna use math dot floor because we're gonna round down and then math dot random and then we just want to multiply that by the length of the symbol string so we'll do time's symbols dots lengths all right we'll save that and now you can see we get an asterisk next we get the curly braces and it just generates random symbol okay so I mean they're technically there's a lot of different ways you could do all of these but I think that these are really clean really short you know it's not a lot of code at all so those are the functions that we're going to use all right so we have we got that out of the way now I'm gonna go ahead up top here because I'm gonna keep these at the bottom and we're just gonna put each one of those functions into an object called random func then we're gonna use this later so for instance lower we'll just have a key of lower and that's gonna call get random lower then we'll have upper which will be get random upper and we'll have number get random number and symbol a symbol will be get random symbol all right so now we just have this object of different all these functions down here so now let's start to work with the Dom because up to this point we've just created our functions to generate different characters so up at the very top let's get our Dom elements okay so we're gonna need the result so this right here is a span with the idea of result that so we're going to output the generated password so let's say results L and set that to document dot get element by D and it has an ID of result all right and then I'm just going to copy this down so that's one two three four five six seven eight and then result I'm just going to highlight this and do a ctrl D to select the next result instance and change this to length all right so length is going to be this number input right here and then we need all the checkboxes as well so let's grab this one and this is gonna be uppercase because it has an ID of uppercase and putting it into a variable called uppercase L element and let's take the let's do lowercase elements and let's do number element or numbers element it has an ID of numbers and then symbols symbols element is gonna be get element by ID symbols and then we have the generate button which is generates and then we have the clipboard button okay so those are all the Dom elements that we're gonna need so now we need to think about events and basically we're going to have two events one two when we click this button and when we click the clipboard button we're gonna do the clipboard last so let's handle the the generate password click event so we'll take the generate element and let's add a an event listener and we're gonna listen for a click and when that happens we'll go ahead and run a function I'm just going to use an arrow function here and can use a regular one if you want now when this is clicked we need to get the value right now we're getting all the elements like the length element the input element the checkbox elements we need the values so 20 you know and then if these are checked or not so let's create variables for those we'll say length and we can get this by taking the length element dot value okay whoops it's not node value just value and then we'll do a console log of length all right so now once I click this generate password we get 20 if I change it to 19 we get 19 good now if I just show you the type of this we can use the type of operator here and generate and we get a string I want this to be a number so there's a few ways to do that we could wrap it in parse it's an easier way is just to add a plus sign and that will make it a number it's the the earn earn arey operator I think it's called and now you can see if I J if I click generate it's now a number all right so now we want to get these values we want to see if these are checked or not so let's say Const and will cause call this let's say has lower and set that to our lowercase element and then we want to get the dot checked property which will be either a true or false and then let's actually just copy this down we need four of these and we'll do has upper so has upper which is going to be the uppercase element okay and then we have has number which will be the numbers element and then we have the symbols so symbols elements and this is going to be has symbol all right and just to check this out let's console.log down here and let's pass in has lower has upper has number and has symbol and now if I submit let's see the first one is oh I got a dot here okay so if I submit we see all truths if I uncheck the first two and submit we get false false for the first two alright so we're getting whether they're checked or not now we're gonna want to have a separate function to do the actual password generation this is just kind of in this event listener we're just getting the values so we're gonna pass this all into a function called generate password all right so generate password and then we'll pass in has lower has upper has number has symbol as well as the length because we're going to need that as well okay so we'll pass that in now the result of this is actually going to get put into the result element so let's set the result element dot in our text and we're gonna set that to whatever this generate password gives us with these values passed in okay so I'm just gonna save this it's gonna automatically generate event.listen and then right underneath that let's create our generate password function let's generate password still in spell it right okay so this is gonna take in all this stuff right here so let's actually do lower upper number symbol and length all right so we have our generate password and I just gonna I'm just gonna put a custom comments in here mapping out what we need to do here so we need to initialize a password variable so basically we'll have a string that will continuously build on to create the password and we want to be able to filter out let's say to filter out checked types or not check types uncheck types okay so basically if we don't have uppercase checked then we don't want to include that we don't want to generate an uppercase we also need to loop over the length okay so whatever the length is in this case 20 we want to loop over that and then we want to call a generator function I can't spell generated our type I should say call it generate a function for each type alright and then we need to add the final password to the password variable and return it in that way it gets put into here alright so that's pretty much the general outline of what we need to do so let's initialize our variable so we'll call this generated password and we're going to just set that to an empty string now we need to be able to count the number of of checked items here so let's create a variable called types count and we'll set this to lower plus upper plus number plus symbol okay so if we do a console.log and I'm just gonna put like a key here a string of the name of the variable which is types count and I'll do a colon and then types count just so we can see what this gives us so let's go ahead and submit we get types count for by uncheck one we get types count three so it's counting the number of checked values so now I'm gonna create an array based off of you know these types these check two values so we're gonna say Const types array and let's just set this first of all to we'll just do lower upper number and and symbol and then let's console.log this I know there's a lot of console logging but again I want you to know exactly what's going on and where we're at so let's say types array and now if we submit this we get an array of true all truths if I uncheck we get true false because the second one is actually lower I'm sorry upper even though its first in the UI but yeah so we just get true false now what I want here is an array of objects that have these as the key so lower true up or true you know so we can do that simply by wrapping these in curly braces so if I do this I do that and I save and then we submit now we have an array of objects with lower true up or true and so on if I uncheck the lower then we look at this array then it's lower false alright so now that we've done that we're gonna need to filter out whatever it's false we don't actually want to include that in the array so we're gonna use the filter method for that just reload that so let's say dot filter now filter is a high order array method and basically we loop through each item so let's say item here and then based on a true or false value it will basically filter out anything that equals false so we need to actually get the value of it's true or false so we can do that by using object dot values and then pass an item which will be an array and we want the first value which would be zero so if it's false or I should say unchecked then it should be filtered out of the array so let's go ahead and save and if I generate we get all four because they're all checked but if I uncheck this one here now we only get three okay and they're all true so whatever is false is now going to be filtered out of the array okay so the next thing I want to do is I want to see if there's none checked because if there's none checked I don't even want to proceed and generate a password so we can do that by checking the types count remember the types count just equals the number of checked boxes so if we say types count equals zero then we just want to return nothing an empty string all right now we're going to continue to deal with generating generating the different characters uppercase letters lowercase letters and so on so we need to like a set up here we need to loop over the length and then call the generator function for each type so to do that let's use a for loop and let's say let's I equals zero and then as far as the condition we're gonna say if I is less than the length okay so in this case 20 is our length and then when we increment we want to increment by the types count the number of checked boxes so we can say I plus equals types count all right now within here we want to take our types array and we're gonna loop through it we're gonna use for each because we can loop through an array with for each high order array method and then we'll say for each type what do we want to do we're going to open up block here and we want to first get the function name so up here we'll remember we created the object of function so we have lower upper number and symbol within this random func object so we want we basically want the key you know the key low or upper number symbol so within our for each here let's say cons Phunk name and we're gonna set this to object dot keys because the what we're looking for is the keys and we're gonna pass in type okay because we're looping through the types array and we want to pass this type into object keys and then we just want the first value here that'll give us the key okay so it'll be either upper lower number or symbol and then we'll take the generated password string which right now is empty we initialized it up here so it's completely empty and then we're just going to append on to it so plus equals random funk and then as a key here we're gonna put in the funk name which was coming from here it'll be upper lower number or symbol okay and just put some parentheses here alright so now let's let's see what do I want to do yeah let's let's actually just do a console log here just to show you funk name I know I could have made this tutorial way shorter but again I'm trying to kind of explain every step that I'm taking here so just to see the funk name here let's see what we get alright so you can see that it basically alternates lower upper number symbol lower upper number symbol and it increments by whatever the type count is if I uncheck two of these and I run this again wait a minute generate password is not a function uh-oh I said generate passwords should be this is the variable which is generated but I just want to show you if I click it now we just get lower oh I need to uncheck these again because I reloaded but now we're just gonna get symbol number symbol number because we're not dealing with these uppercase and lowercase checkboxes anymore alright so hopefully that makes sense and I'm just um just keeping these console logs in here but I'll comment that one out actually will comment these out as well okay so now you can see that that those are getting created and then what we're doing is just depending on to this generated password so now let's go outside of the for loop which ends right here and let's say Const well actually let's let's see what this gives us so we'll say console.log generated password and let's click OK so now you can see what we're getting from this generated password what I want to show you if I change this length to even one we get four and the reason for that is because in this for loop we're incrementing by whatever the types count is and in this case it's four because these are all checked if I uncheck two of these even though the password length says one we're still going to get two so the way we can fix this is by just slicing off everything but one okay so I'm sorry whatever the length is in this case one so let's say generate a password and we'll use slice and we're gonna slice from the beginning and then use the length okay so if it's ten it'll give us ten so let's just save that and now if I generate whoops it's still 20 let's make it 1 now we only get one okay and if I change it to two or yeah let's do two we get two okay so what we'll do is just set a variable here called final password and set it to that okay and then just simply return that and that's it that should give us our password and remember we're returning final password from our generate password function which is going to get put into the results and now when I click generate there it is okay if I change this to let's say five and generate we get five and let's make sure this stuff works so if we uncheck you know symbols and numbers let's change this to ten and generate now we only get uppercase and lowercase letters if we take away lowercase we only get uppercase if we don't have any checks then we get nothing it just returns right here this empty string all right so that's done now the last thing we want to do is want to be able to copy it to the clipboard so we need that that functionality so let's go up here and let's say copy password to clipboard all right so we're gonna go ahead and take our clipboard element and add an event listener we're gonna add a click and run a function okay so if you've never done this before in JavaScript I just want to show you so let's say copy to clipboard and j/s yeah in this article right here so basically we need to create a text area within JavaScript so we want to create a Dom element a text area and then we want to use the Select method to select the contents of the text area element all right and then we need to use this document dot exec command copy to copy the contents of the text area to the clipboard and then simply remove the textarea from the document alright so very similar to what we see here so let's do that let's go into our event listener and let's say Const text area and to create an element from within JavaScript you can use document dot to create element and we're gonna create that the text area is the type of element we want to create and then we want to take create a path password variable and get that from the result in our text okay we have our result element which by now should have the password in it so we can get it within our text in our text you can you can add content to it with that you can also get it with that property now we're gonna just check to see if not password so basically if they click the clipboard and there's nothing in password then we're just going to return all right but if there is then we're going to take our text area and we're going to add a value to it of whatever that password is okay so up to this point we have this text area we created with create element and we're putting the value of password into it so now let's take the document dot body and we need to append child and pass in our text area okay and then we need to take our text area dot select okay what what the pen child does is actually puts it in the body and then we want to call select just like I showed you in that article and then to copy to the clipboard we can use document dot exec command and we want to execute the command of copy okay then we need to remove the text area we don't want to keep it there so we can call remove all right and then we'll just do a simple alert and it'll just say password copied to clipboard okay so we'll save that and now if we go and let's see that's not ours let's go here and just reload and generate a password and then I'm gonna click this we get password copied to clipboard I'll just go down here on the console and paste and there we go alright so that's it now I know that this may have taken longer than I can just get rid of these here longer than you might have thought but I wanted to go through it in a way where you would understand it rather than just starting at the top and just writing the code I mean you guys have the code pen it would be pointless for me to take someone else's code and just copy it you know I want to the point of the tutorial is to explain it to you so that you can understand it so hopefully I did that okay alright so that's it guys thanks if you like this video please leave a like and that's it I'll see you next time

Channel: Traversy Media

Views: 89,305

Keywords: javascript, js, javascript project, password generator

Id: duNmhKgtcsI

Length: 35min 31sec (2131 seconds)

Published: Mon Oct 21 2019