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

[@abdnahid]

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

[@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

[@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.

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

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

[@monalkumar1289]

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

[@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.

[@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.

[@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.

[@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

[@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

[@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

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

[@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.

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

[@cvctutorial1858]

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

[@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

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

[@alicendeh8048]

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

[@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.

[@amkj96]

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

[@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

[@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.

[@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

[@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.

[@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.

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

[@kennethkipchumba2532]

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

[@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.

[@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

[@MULTICODE]

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

[@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 👍

[@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.

[@RenoBasque]

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

[@jdratlif]

An actual use for unary plus. Nice!

[@sethfeingold]

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

[@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.

[@kevinzhang8974]

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

[@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

[@albanustemu7396]

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

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

[@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

[@agustina2621]

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

[@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.

[@anirbandas12]

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

[@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

[@jeromesnail]

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

[@timwilson2009]

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

[@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 ?

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

[@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

[@furqanamjad90]

I see Traversy notification I click

[@amanlearnscode]

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

[@shrirambalaji2915]

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

[@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

[@_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?

[@umarjaved3584]

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

[@petecapecod]

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

[@rolando8966]

Awesome! Great tutorial! Especially the explanation

[@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?

[@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

[@StefanRows]

Great video Brad!

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

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

[@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.

[@Wavywahid]

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.

[@qqrno]

Great video, step by step well explained. Thanks!

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

[@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

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

[@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.

[@newabyuser]

He is back

[@nomagix]

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

[@00el04]

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

[@ourielperez1646]

Wonderful! Thank you! And Thanks Florin! :)

[@FirdavsiGameDev]

Great tutorial, Brad. Thank you!

[@mounir101]

Extremely good one! Thanks a lot.

[@dianasvideos123]

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

[@soad2609]

Tremendous Project!

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

[@Ada-zg2qb]

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

[@ramyniranjan5751]

awesome brad, well explained

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

[@Erno158]

Thanks you are my friend now

[@shaneblackwoodGodbless]

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

[@aldocaamal7740]

I have some Full Stack vids, using Angular, React, Flask, Node, Firebase and some Code Reviews that could help you

[@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.

[@iamtheboneofmysword728]

Ty for explaining everything :)

[@didiDanaila]

You are my teacher 😜 What about a flutter course?

[@silencesir]

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

[@stealthbusiness]

Thanks for putting the tutorial together. :) Is there a way to Password Protect online videos (KZbin, Vimeo... etc) with some if not all of these features? Random Password Set the Expiration time or date Set the Total time a video can be viewed Set how many times the password is allowed Setup Password Groups I know it's asking a lot, if you're busy, I understand. You seem to have the skills to make it happen. Just putting it out there.

[@devnextbd]

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

[@dean6046]

Thank you Brad! You're the freaking man

[@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?

[@robinjames9898]

Topic: Course Idea Having trouble building my own validation library and publishing it on npm. Thought it'd be nice if you could walk us through the steps of building one that could maybe change the colors of svgs for example and highlight the publishing phase. PS: thanks for everything you've done and will do for me in the future. You're "paying it forward" and I will do the same with whatever knowledge I gain because of you.

[@crazzydude132]

Hello sir, I have a request if you make a what's app group for the developer where we can ask any questions related to the code which we all are doing. It will help us a lot and by answering the questions of one person rest all will also learn something new. You can also make the group in other app also. Specifically for the web developer. Please sir.

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

[@razin275]

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

[@bartff5568]

congratulations 900k subs

[@controlccontrolv4519]

Thanks again Brad.