JavaScript Password Generator 

As someone who is in the early stages of learning JS and feels overwhelmed sometimes with all the stuff there is to learn, I can't begin to explain how helpful this was. Going through a project step by step with each step explained in a logical fashion is so great. Even though I didn't create this on my own, I still feel like i learned a lot.

Hey, dont worry about length. Your tutorials are well worth the time

Nobody's complaining about video length. If you explain like this, nobody's gonna complain. Thanks!

I'm in a coding bootcamp and this was SOOO helpful for our password generate homework. I followed along at .75 speed and was so glad you explained it all so thoroughly! Excellent!

Thanks a ton Brad! I got a job as software Dev a month back because of your RU-vid and udemy courses.l still never miss a video of yours.

Thank you Traversy! I've been watching almost all of your Videos as well the Udemy courses! Unlike the 12 and 13 years old I saw on the comments, I'm 35 and struggling to land that first job as a developer!

I am currently taking a full stack bootcamp and am in the beginning stages of learning JavaScript. Our first assignment was to create a password generator. Your video did an amazing job of explaining the "why" of the code and I really appreciate all the detail you went into. I am saving this to reference for future projects. Subscribing for more!!!

Maaan the timing is so perfect I just got done with my javascript basics and a few projects....I was looking for some more project ideas actually....thanx man great video

Those who are watching this video all are amazing. Thanks Traversy media I have learnt many things from your videos...... happy coding!

Great project! And I know this is more about the javascript concepts than password generation, but I have one minor criticism of the password generation algorithm. As it is, the algorithm always generates passwords that follow the pattern lowercase UPPERCASE number symbol. This limits the pool of possible candidate passwords, as you will never see a pattern of, say, UPPERCASE UPPERCASE or NUMBER NUMBER. Therefore since you are drawing from a smaller pool of possible passwords in theory that is a slight deficiency in the "randomness" achieved by the algorithm. Anyway, still a very great tutorial! Thanks Brad!

It's so weird not hearing "This video is sponsored by DevMountain".

Thank you for this tutorial. I just started at a boot camp and this tut helped me really solidify my understanding of JavaScript and things such as arrays, and functions! Thanks!!

Better implementation would be that you randomly select your enabled functions with in the length loop. It's not very good that the function calls are in some fixed order. If you select length 1 you always get a lowercase char.

When I started the video, I had a different approach that would have taken much longer to accomplish. It's always good to see how others accomplish their tasks. Thanks for the help, Brad.

I was working on your react crash course when I received this notification..thank you so much Brad for all your awesome videos👏🏾👏🏾

Thanks a lot! I learned a great deal doing this. If anyone is interested, I also added a shuffler so that the character types weren't in order, just at the end, when you create the finalPassword constant: const finalPassword = generatedPassword.split('').sort(function(){return 0.5-Math.random()}).join('');

Just what I needed. I have just finished learning the beginner to intermediate level basics of JS and was looking forward to making a few frontend JS projects

This is insane and wish it was uploaded a few years back, i worked a lot to do the same thing on a project when i was a beginner! :(

Awesome tutorial! And don't apologize for the length of it. I'm sure I speak for us visual learners out there that are tremendously benefited by the frequent consoles. Also, it's a great habit to push onto developers of all skill levels. So much more time can be devoted to the logic of the code itself rather than having to trace and locate errors that could have been easily avoided if found early on.

Brad I don't even have words to say how much I learned in this tutorial. And now I have even more doubts; more opportunities to learn. Bring more of these. Thanks a LOT! Thank you Florin! 🙏🏼

The tutorials are better when you add more detail in your explanation. The time of the video doesn't matter because you are learning it faster when you explain it and show the console logs along the process of the tutorial. I definitely prefer this tutorial over some that have less explanations because you have a better understanding when the tutorial is done. Thanks.

I strictly code in c++, but watch these videos anyway because of the amazing content creators great personality

Really great tutorial! Thanks so much - I'll definitely have to check out the rest of these projects from Florin!

Thanks Traversy Media, this is great. But I have one tip to share to everyone. For console log variable, wrap the variable inside curly braces like console.log({helloWorld}). Will let us easy to know which variable is logging.

Would be better to scramble the generated string before slicing it to avoid lower, upper, number, symbol pattern in the final password and in case the password is 4 or less there would only be one of each.

I'd personally use a while loop and randomly choose one of the generator functions, so the ordering is random as well.

An actual use for unary plus. Nice!

Big ups Brad! I just finished following the tutorial and everything works well. So glad today!

I just decided to make a random password generator to brush up my skills! And damn your video came out! Thanks for the quality content! Keep it up!

Video suggestions, how to fight against laziness and fear as a web developer😅

Its simple task done in complicated way! but it`s great i learn a lot of technique

Gonna take a look at it later. Thanks traversy for your hard work to teach people through your Channel all over the world

// Suggestion: copying the generated password without creating a new element: resultEl.select(); document.execCommand('copy'); resultEl.blur(); Love your tutorials, btw!

Hello Brad, thank you again for creating such great content, it's resourceful. Btw, on your own website, your logo overlays with the navigation bar, I think you didn't notice considering all the great effort you do to give us such amazing content and resources. Cheers from Dubai.

Thanks Brad! very handy and useful. I coded along this morning for morning brain exercise.

Another approach to generate the Password would be to have 4 variables [Upper,Lower,Digits,Special] each storing all possible characters for their respective type and a complete String which initially would have all the characters in the above four variables. Now whenever an item using the checkbox is added or removed at the same time we would add / remove that item from the Complete string by using the initial four variables [str.replace(item,' ')] and then just generate a random number from the complete string length and keep appending. This way the seq of upper,lower,digits,special is also randomized and probably this would be a cleaner and shorter approach.

Thanks sir very much for this video. I will start my new project of Password Generator Website by taking reference from your video. Thanks very much. -Romit

Very basic but also pure, beauty and elegant :D Nice video sir, it brings me "back to square one" my initial love, JavaScript!

Thank you so Much I almost did and I was struck in the middle you helped me out

Thank you so much man! , I understood how it works as someone who is in the early stages of JS. I just need more practice over the commands.

I keep on learning! NO PAIN NO GAIN! Yesssss...

I think this solution is pretty clever to a certain point. The problem with using the alphabet is that each character is not uniformly represented, We have 26 letters, but just 10 digits. This means that letters are more likely to appear than numbers and if you had a short password you might not get them at all. This solution is clever because it gives to each method 1/4th or 1/3rd basically an equal chance of been picked. However, the last part where you systematically add each function is not optimised in my opinion because now the pattern becomes predictable. Instead, it would be better to again randomly select one of the active functions knowing they will be equally represented. With 4 options, optimally, the password will have 1/4th of each (lower, upper, number and symbols). My opinion of course.

Thanks for explaining it step by step and taking the programming logic into account! You're awesome, Brad, thank you!!!

Awesome tutorials as usual. Thanks Brad. I would like to suggest one small tweak. What about adding an event listener for any change in checks or change of input of length so that password would be calculated again without pushing the generate button.

Don't worry about it taking longer. That is a good thing. I know others have made comments about you flying through things. This will satisfy them, hopefully. :)

29:17 For any getting confued when length is 1 it is returning 4 characters coz typeCount is running 4 times because of the forEach method not coz we are incrementing i by four time

nice app. i was making generator just for fun and i used a string of symbols and looped though them but this way looks alot better and of course much more complete

Great Job! Like that you use concole log so much. Thanks man

Awesome! Great tutorial! Especially the explanation

That's the kind of project I want to try to do myself before even watching the video and then compare our solutions :)

I see Traversy notification I click

Great video! One thing I noticed is that your password characters are always in the same format - the order of checked char types. I think it would have been better to grab a random one, loop over by 1 and skip the slicing altogether. Should make a more secure password too!

Great tutorial Brad! Just to add up, to get a random number you could've just do: Math.floor(Math.random() * (max - min + 1) + min); No need to mess up with ASCII codes

Great video Brad!

Since document.execCommand() function is deprecated you can replace the whole clipboard function body with one line of code using Clipboard API: navigator.clipboard .writeText(result.innerHTML) .then(() => { console.log('copied'); }) .catch(() => { console.log('not copied'); });

Yeah couldn't figure out why loop looked weird till realized it wasn't really random. For those interested in random you can do something like this. for (let i = 0; i < length; i ++) { const funcName = Object.keys(typesArr[Math.floor(Math.random() * typesArr.length)])[0]; generatedPassword += randomFunc[funcName](); }

Wonderful! Thank you! And Thanks Florin! :)

Quick question: I understand how to do everything u did in this video and could probably build a similar application myself from scratch, but it would take me several hours at least on my own without references. To be job ready, is this something u should be able to whip up in no time on your own? In other words, being able to build an app like this and understand all of the concepts, where would that place somebody on the JS journey? close to being job/internship ready? Thanks for all that u do!

So even though the code is executed linearly, the functions can sit at the bottom? You'd think they'd need to be at the top before they're used / passed into anything, right?

Don't make them shorter ! Please . The level of explanation it's just right . I don't see any reason why u feel so "pressed" to make them shorter . and THANK YOU 👍

Another great video Brad 💯 cool solution, and as always easy to follow and very informative.

I learned alot this way please keep making small projects to learn more and more and faster Thank You #Traversy Media

I don't like front end cause i think i am not creative ..and sometimes the css doesn't work the way i think it should....But your videos help a lot..Thank you

Thank YOU Brad! I would love to see more of these JS focused type of videos in the near future :) LIKED / SUBBED :)

Already made this in angular + you can save it & fetch it too!

Is this possible with regular expressions? Because that's what I thought you'd use initially...

Here in Denmark where I live, it’s a big story in the news medias these days that we Danes aren’t good enough at creating new passwords, and that we therefore reuse the same one or two passwords throughout all sites we have an account to. So this project Can really help me make some really great and strong passwords that I can keep and use. But it made me wonder if you, Brad, actually watch the news on Danish television? ;)

YOU ARE THE BEST!!!!!!!!!! I totally enjoyed this and learnt a lot. Thanks, Brad Is it cool to add some more stunning stuff to this, and make it our office's password gen :)?

I think there's a small bug in here. For example, when you check uppercase, number and symbol while choosing lenght = 2, it will lead to the password generated which does not contain the symbol. So, maybe we should do something like not allow the app run if typesCount < length. Thanks for the tutorial

Great video, step by step well explained. Thanks!

Well you are awesome day after day you're getting more awesome. Thanx man i get anew tip in every single video bro thanx

Thank you very much for this amazing video.

Hi, thank you for the great explanation. I wanna ask you how to limit the number of characters the user allowed to generate. Min 8 and max 128 for example. Thank you!

Respect, boss! PS. The document.execCommand method is deprecated. Use navigator.clipboard.writeText (returns a Promise) instead.

Thank you for this tutorial, Brad!!! I really appreciate the explanations! More please!!! :D

Great tutorial, Brad. Thank you!

It was a good tutorial, and I learned a lot, but I consider that following the same pattern reduces the number of combinations, is there an optimal way of doing it, totally random?

So is the .filter method filtering out the items that are false because Object.values(item)[0] represents true and item[1] represents false?

Ty for explaining everything :)

Thank you for this video. I have a few questions though. 1. In the .filter, what if you want to filter out values with true? Is there a different command? 2. When generating a random password, the location of the characters also needs to be random. In the video, there is a sequence to it, lower upper number symbol... Do I put Math.floor(Math.random() * 4) before it's inserted into the array? (I don't know if what I said make any sense.)

Extremely good one! Thanks a lot.

Amazing tutorial, I liked it a lot and also I learned a lot

I am hoping someone can help me understand why I am getting an error with the eventlisteners. Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') Seems the elemtns are empty and are reading as null. Not sure how to fix that.

let me start by saying I love your videos, but what I am having problems with is I am trying to be a better web developer using udemy codecademy skillshare and the courses aren't bad but as someone who is trying to be a web developer projects like calculator really don't have much use, so what I am looking for is a course which at the end we do a real world project front and back end

Cool tutorial, thank u so much!

Hello sir...thanks for this tutorial...and what if i told you that you're the one who inspired me with your tutorials..i had planned to give up on coding but your tutorial showed me that I can still make it...but would appreciate of you can do tutorials on sass and asp.net Love you!

Hey Brad I am not able to find anywhere the Object.values[0] its the '[0]' part I am not able to understand

Is it worth to become a web developer? I mean i like to code but it seems hard sometimes and also you have these website builders and these easy solutions that can replace a developer. I had done your js course and your nodejs course completed the projects and also doing some other projects but still i feel like i have to learn a ton of stuff

thank you sir....very helpful your tutorial.......

How do i fix the error - Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')? Im typing the code exactly as his but the value isnt being stored.

Missing 'DevMountain' sponsorship.

Thank you Brad! You're the freaking man

You are my teacher 😜 What about a flutter course?

Thanks you are my friend now

The order of characters is not random: 2 letters + 1 number + 1 symbol [repeat] first character always lowercase letter...

awesome brad, well explained

Can you make a video about your opinion on whiteboard interviews for tech companies?

He is back

I built it the jankiest way possible, but I intend to update it using everything I learned here.

Please someone explain me why [0] is used in Object.keys(type)[0].I am not able to get it