JavaScript Password Generator

[@Classick]

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.

[@phatcap45]

feel exactly the same way

[@Knards]

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

[@liquidtags]

I second this. This is Netflix level content to me.

[@Knards]

@@liquidtags Never watched netflix, but I sure watch his tutorials

[@duplicpapers8753]

@@Knards e

[@kaynesheenan]

length.value = good

[@abdnahid]

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

[@CourageousCreatives]

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!

[@narendrajoshi5460]

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

[@ademineshat]

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!

[@kennethkipchumba2532]

Keep coding. Never give up. You will get that job.

[@Ali-lm7uw]

I am 32 and learning from last year on and off. I hope all of achieve what we have set out to do.

[@BlackRoseSempai]

I got my first developer job at 38!

[@seanconnelly2002]

51 and just getting started! YIPEEEE!

[@TrobadourXP]

@@BlackRoseSempai Did is pay off? I am making 55K as a teacher now but I am wanting to switch to a developer and make the same at minimum or higher.

[@katiepatterson2313]

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!!!

[@monalkumar1289]

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

[@sadhanasaha9400]

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

[@amnaatarapper]

Go yo freecodecamp for projects ideas you don't have to take the courses to access the projets

[@Vack91]

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('');

[@koodauskanava9096]

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.

[@HowardBuksbaum]

I was just going to say that. I like a random generator for each character too, but great beginner tutorial. As always, great job Brad.

[@TraversyMedia]

That's true, thanks for the input. Should add a few tweaks to make the generation random

[@ahmad-murery]

Yes, but I think you may then drop one of the requirements you checked (by randomly picking an enabled function), very rare although, Maybe shuffling the generated password before slicing it would help

[@koodauskanava9096]

@@ahmad-murery No, you pick functions randomly that the end user has selected, so that's why those are enabled.

[@ahmad-murery]

​@@koodauskanava9096 Yes understood, what I meant is if for example you select 3 options and then the random function keeps returning option 1 and 3 all the time (this is the rare part I mentioned earlier), this way option 2 will not appear although you checked it, No doubt that there is a very tiny chance for this to happen with the only 4 options we have to pick from Thanks & Regards

[@mattmaliaros6236]

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.

[@edanrene]

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!!

[@ThiagoVieira91]

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! 🙏🏼

[@alicendeh8048]

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

[@rafatulalam8677]

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

[@BackWoodsWisco]

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!

[@michaelrobinson5981]

Exactly what I was going to say!

[@mykalimba]

Yeah, that's one of my criticisms. Plus, it's messy the code has to "clean up" passwords that are too long. There's definitely a cleaner way to do this that gives better "randomness" to the generated password.

[@Max-br5wo]

@@mykalimba How about this? for (let i = 0; i

[@stocktrade9655]

keyword "beginners" . For me is just right

[@-zelda-]

Just shuffle the password right at the end of the process return generatedPassword.slice(0, length) .split('').sort(() => Math.random() - 0.5) .join(''); The fixes that other people suggest only cause other unnecessary problems

[@cvctutorial1858]

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

[@yschin5663]

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.

[@jordanuky]

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.

[@anuragsharma966]

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

[@MrPwang08]

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.

[@vain_za]

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

[@alicendeh8048]

So true😂😂

[@TraversyMedia]

lol, We put a pause on sponsorship for now

[@Ath9394]

Perfecto

[@ProgrammingwithPeter]

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! :(

[@kennethkipchumba2532]

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

[@sethfeingold]

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

[@amkj96]

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

[@KuldeepSolankiYT]

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!

[@amanlearnscode]

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

[@MULTICODE]

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

[@bobbynicholson5329]

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. :)

[@gosnooky]

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

[@neenus]

Hi there ... I'm trying to do that to randomize the ordering as well but I couldn't figure it out can you share how you did it please!

[@Max-nm8ct]

loops are outdated. higher order functions FTW

[@mohammadshweiki1511]

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.

[@tomershechner]

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

[@mykalimba]

Sure this code will work, but the values you plug in for "min" and "max" would be the ASCII character values, no? I don't see how this works without introducing ASCII values. 🤷‍♂️

[@tomershechner]

@@mykalimba no.. they'll be 1, 10

[@mykalimba]

@@tomershechner He wants values 0 through 9, so you'd plug in 0 for min and 9 for max, and when you simplify your equation, you end up with what he already has. Then, if you decide not to add the ASCII value 48, you're relying on under-the-covers Javascript functionality to convert your number to a string. While that's neat and convenient, it's considerably less efficient than doing the ASCII math instead.

[@kevinzhang8974]

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

[@agustina2621]

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

[@crysist13]

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.

[@chiragjain291]

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.

[@capedcrusader5282]

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

[@marcoio8742]

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.

[@misgator]

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.

[@sermetpekin2829]

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.

[@timwilson2009]

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

[@RenoBasque]

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

[@jeromesnail]

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

[@petecapecod]

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

[@furqanamjad90]

I see Traversy notification I click

[@MULTICODE]

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

[@TraversyMedia]

Ill add it to my list

[@MULTICODE]

@@TraversyMedia thanks sir

[@jdratlif]

An actual use for unary plus. Nice!

[@umarjaved3584]

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

[@rolando8966]

Awesome! Great tutorial! Especially the explanation

[@stocktrade9655]

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 👍

[@AnilKumar-bh4vt]

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

[@Hotatoes]

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

[@funnyanimalworld7579]

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

[@_nightowl263]

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?

[@albanustemu7396]

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

[@byedwardleung]

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

[@nangzdk]

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!

[@qqrno]

Great video, step by step well explained. Thanks!

[@THEOTISBEASLEY]

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!

[@BalakinGG]

If you can build it in a several hours by yourself, then you are ready to be a junior dev. You will learn how to do stuff faster with experience. Like if you build something similar before (1-2-3 times), on the next try it will be much faster, because you basically did the same already and you know that you need to do and how you would do it.

[@NoBeatsBro]

90% of coding is googling how to do something

[@THEOTISBEASLEY]

@@BalakinGG That makes sense that the more you do it the faster and quicker u become at recognizing patterns. But I feel like I would slow down a team A LOT if I became a jr dev. Do teams understand that people early in their jobs take much longer to do seemingly simple tasks like build something like this or do they except you to code something like this up really fast?

[@BalakinGG]

@@THEOTISBEASLEY Juniour dev job is literally to became a middle dev. You will get easy tasks. More experienced devs (seniors) will check them on code review (for example). So team does not expect that junior dev is going to be a pro star. Becase in that case it woudn't be a junior dev. Ofc, there are some toxic teams that can exploit you. Just try to avoid them.

[@joel9909]

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 :)?

[@shrirambalaji2915]

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

[@dianasvideos123]

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

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

[@quocanhbach6696]

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

[@XbattlepopeX]

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](); }

[@spiritualcontent763]

why we are addig [0] at the last ?

[@dancehalllyrics1303]

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? ;)

[@love.ly.]

It's becoming more and more of a problem, everywhere in the world

[@MartinMartinez-nf5sk]

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.

[@stuntmen_memes]

Same

[@silentscopez1364]

@@stuntmen_memes same problem.

[@GabrielRFE]

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?

[@3dmango]

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!

[@StefanRows]

Great video Brad!

[@anirbandas12]

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

[@bafana_mhlamvu]

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

[@gosnooky]

Why? Regex is an analyser not a generator.

[@mounir101]

Extremely good one! Thanks a lot.

[@FirdavsiGameDev]

Great tutorial, Brad. Thank you!

[@rashidchowdhury4159]

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.)

[@ourielperez1646]

Wonderful! Thank you! And Thanks Florin! :)

[@curtiskil]

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

[@lifeisbeautifu1]

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'); });

[@dean6046]

Thank you Brad! You're the freaking man

[@kostas71374]

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

[@aldocaamal7740]

The truth?, I worked on projects with teams of few people as a freelancer, and you have to work your ass off, going bananas doing research, work on top of a strangers code; it's hard but if you know what you are doing you will be fine; there are still people that want things built from scratch so dont worry about those shit site builders; you could make good money depending on where you live, if there is high demand on web developers; and a little advice, don't just watch Brads videos, there are a ton of channels that deliver great stuff that Brad never touches, outside is the answer if you feel that you are not well prepared and focus on one frontend and one backend if you want "Full Stack" (react/angular/vue paired with node/python/php for example).

[@didiDanaila]

You are my teacher 😜 What about a flutter course?

[@jatinraj4974]

Sir do more like this video , love it😘😘

[@prakashgunjari1996]

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

[@ilaydagolbas7855]

Solution for not being able to have the same character types side by side (for example in the main code you can have A&vK but it is not possible to have AB&0 since A and B are both uppercase letters) --PREVIOUS VERSION-- for(let i=0; i

[@ayoadejoshua1635]

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!

[@ramyniranjan5751]

awesome brad, well explained

[@NotesNNotes]

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

[@FrontendDeveloperKumar]

Hi Traversy, Thanks for the tutorial, I am a frontend developer. I have a question regarding the copy function. Is it working with firefox and edge too? I have tried some similar code but most of them work with chrome and firefox. But I am not able to find anything which one works with all of them. Please let me know if you have any suggestions or reference. Thanks.

[@viktorparify]

www.w3schools.com/howto/howto_js_copy_clipboard.asp

[@FrontendDeveloperKumar]

@@viktorparify thanks sir for the solution, I'll try this one too.

[@devnextbd]

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

[@nomagix]

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

[@silentscopez1364]

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.

[@iamtheboneofmysword728]

Ty for explaining everything :)

[@fayojixe9925]

What program are you using to type the codes in?

[@silencesir]

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

[@soad2609]

Missing 'DevMountain' sponsorship.

[@newabyuser]

He is back

[@Ada-zg2qb]

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

[@razin275]

Hey brad how much you get per sponsorship at least??