Build A Password Generator With JavaScript - Tutorial

Learning web development can be tough and boring, but it doesn't have to be. In this video we take a look at creating a simple JavaScript password generator with multiple generation options. This is a great project for anyone just getting started with JavaScript or anyone that wants to create a fun project because it is simple to create, but teaches really good clean code habits and best practices.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/J...
Flexbox Tutorial: • Learn Flexbox in 15 Mi...
CSS Grid Tutorial: • Learn CSS Grid in 20 M...
🧠 Concepts Covered:
- How to use flexbox to center elements
- Using CSS grid to create layouts
- How to use charcodes
- How to bind click and input events in JavaScript
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#PasswordGenerator #WDS #JavaScript

[@ericzorn3735]

I love all of this vanilla JavaScript content that you are producing. Everyone nowadays is so caught up in all of the glamorous frameworks. Although I am a huge fan of react and vue , it is important to know the basics and fundamentals.

[@grovkillen1]

Can't agree more!

[@NoNotDave]

Agree! ❤️

[@mattburke5491]

Thank a lot. This was vary helpful for my bootcamp homework assignment. You break down the code explanations really well. You went really fast through the JavaScript portion. Lol. I got it all though. The only feedback i had was creating a reset button. I did that in my version. Wonderful video!

[@michaelolukaka]

man you make coding seem so simple...am doing a simple password demo, would not have thought of using character codes...Awesome tutorial bro.

[@user-lb8kz8kc5d]

Man I honestly admire you.

[@ponrajs5396]

Thanks for the best design too, Kyle. You are my best teaching KZbinr ever 🤩

[@9gager87]

What an amazing video! Please keep making these videos with no js frameworks, they are great!

[@kelvezu1585]

Watched this at playback speed of 1.75x still I can understand his clear instructions. Thanks Kyle.

[@mrviometal4948]

Dude I just watch your videos for fun, of course, to learn too but really your presentation of the problem, how to solve it and the waterfall effect of functions and elements that connect to each other is just mesmerizing

[@WebDevSimplified]

Thank you so much!

[@eez]

Nice one again. Thanks. But I think when you select "Include Uppercase/Symbol/Number" it should mandatory be included in generated password, where as when we use random number in range technique, there are chances that it won't be included. I think best would be to generate lowercase password of required length first then later include randomly generated Uppercase/Symbol/Numbers and replace randomly in previously generated lowercase password. (But Of course that'll also limit number of included Uppercase/Symbol/Number to 1)

[@willmeow00]

Excellent video. I actually wrote a random password project that I had to explain when I interviewed for my software dev job (that I got), but yours is much much cleaner than mine. For mine I was lazy and had only one for loop that pushed into my array the ascii values from 33 to 122, but this creates a bug. ASCII code 60 equals < and I think the DOM recognizes this as the beginning of a new HTML element and any characters that were popped from the array afterwards resulted in empty character literals. After watching your video I believe it could be because I wasn't using fromCharCode and simply concatenating my randomly popped values to my string variable via +=. The solution I came up with was I filtered the '

[@rolando8966]

Bro! As a beginner in full stack bootcamp… ur tutorials are absolutely incredible 🔥👨🏻‍💻🚀… thanks 🙏🏽

[@antoniamesesan9711]

cannot thank you enough for your videos, thank you so much for sharing your knowledge with us, as a beginner i can say it means a lot

[@Norfeldt]

Fantastic video. I wanted to practice some HTML forms and this was a really good exercise to refresh some stuff. Thank you very much for sharing such great content.

[@justinbush9364]

Thank you so much I’m working on a similar assignment right now in my boot camp this really helped

[@HearterSG]

Yo @Web Dev Simplified At 4:50, when you want to edit includeNumbers 3 times to includeSymbols, a great way to do it in vscode is to select 'Numbers' and press ctrl/cmd+d 2 times, which selects all 3 instances at once for a single edit :) Nice video btw.

[@saqibmabbasi]

Awesome, loved how you developed it, finally I'm taking interest in two things I always feared JavaScript and CSS

[@JuanPerez-ns6jz]

Great tutorial dude! I learned a lot from this. I'm kinda new to web development and this video gave me a better understanding of how to implement JavaScript into web apps. For those of you guys that wanna get rid of that blue border that appears around the "Generate Password" button when you click it just add this to your css file: .btn:focus { outline:0; } Keep up the great video tutorials dude!!!

[@swarupmahapatra1]

Its a clean implementation. However it has a potential bug. Lets say a user wants a password of length 6 and also considers uppercase, numbers, characters. It is quite possible (statistically) that password may exclude one among the user choices. Hence violating the requirements. I would suggest an implementation where first build the password sequentially with an even distribution of characters and numbers. After that shuffle the password and return it. In that way, it guarantees that the user choices are fulfilled.. Hope that helps.

[@mykalimba]

I like this implementation as it is.

[@HearterSG]

@@mykalimba @Swarup Mahapatra's point is that the script doesn't GUARANTEE inclusion of uppercase/number/symbol, as it only ALLOWS the inclusion of those elements. And he is right in that. Good eye!

[@Dimm88]

Quality assurance engineer spotted :D

[@swarupmahapatra1]

@@Dimm88 yes I was in QA role for few years and then moved to full stack development :)

[@mykalimba]

@@HearterSG I understand what the OP is pointing out. An assumption is being made that the requirements specify that the algorithm must guarantee each of the checked options, which is an unfair assumption. Additionally, given that the user can request a password of length < 4, perhaps it's safe to assume that it's NOT a requirement to guarantee each checked option is used, as it is impossible to guarantee this when the password length is 1, 2, or 3, and all options are checked.

[@Lmfaorofl17]

25:39 characterChode 😳 nice vid

[@alinawaz4034]

Only people from the Subcontinent can understand that 😁

[@tryndamere9541]

Congrats on 100K subs dude 🎉🎉you deserve more! 🎊🎊🎊

[@WebDevSimplified]

Thank you! I am still shocked that so many people learn from and enjoy my content.

[@BekBrace]

Great work, man, I am working on the same project currently

[@alsewilson6581]

I'm really grateful for this tutorial video. I'm an amateur programmer. Learnt during this covid lock down and this channel has really been a blessing. Although I have a little problem with this password generator. It can run on the browser. Giving a strict mode error. Please can you help me out🙏? I will really appreciate. God bless man🙌

[@digigoliath]

Awesome!! Thanks for an enjoyable video!

[@guyfawkes6930]

I love you man your literally a savior

[@mmushtaq908]

Thanks for this productive video. Keep it up.

[@frownless]

Dude you need to make a javascript course your explanations are awesome

[@andresramirez4469]

I am doing my way. without the checkboxes and slider option. It seems like more work. But the video has given me a better idea of how to make password generator

[@surajitdas6555]

Kyle can you please tell us from where you have learn all the JavaScript concept, I want to learn the best practices of JavaScript. You are awesome👍

[@computergeek5657]

thank you so much, teacher

[@usama57926]

sir your videos are really helpfull

[@somdatatechnology233]

Waaw you are really amazing man!!!

[@cesarbrauliosumbomacaia436]

Thanks, you explain very well congratulations

[@mohammedsadiq5729]

Dammit!! Too good🙌

[@mooder3247]

You are awesome dude ❤❤

[@thewiseperspectiveoriginal]

This is awesome bro

[@palmreader311]

I like how at the end he said it was a really simple password generator

[@joysofdata1752]

Thanks brother!

[@jit3191]

Very Nice video!

[@usama57926]

thank u so much sir

[@hamzadarej410]

you are the best ;) thanks

[@raymondmichael4987]

Thanks for this bro, can you simplify webpack, usage and configuring for sass, css, html and Javascript. There are a lot of things to configure to simplify and speed development experience but most of the tutorials just stop at beginner's level, hopefully you can dive a deeper. I would like to use webpack for my coding. Things like browser-sync,minifying, code compression in case of a production bundle, and any other feature you know, you get idea. It won't hurt if you end up creating a series, I'll love it. Greetings from Tanzania 🇹🇿 Happy xmass 🎄 & new year

[@samwisdomsa]

Great work. I love your style of simplifying web dev. The file containing the password character codes you have used, how can someone access them and how can I get them into my code for use in my code?

[@michaelhornback7837]

This video is very interesting I used LastPass for my passwords I use their generator to make a password and then like 12 hours later my Facebook was hacked with the password that I used so I find that very interesting so I was trying to find a way to make my own thanks for the video

[@ronistiawan1130]

thank you so much

[@mohammedsayeed330]

All I can say his He is just Great

[@vishalnadar3631]

you are awesome..

[@Mark-kw5tg]

I came here to practice JavaScript and now I'm more interested in CSS

[@bennybar]

Nice video, but wouldn't it be easier to just append the character onto the end of a string using += instead of pushing it to an array and then joining it together?

[@NoFaceCoder]

Nice 👍! 😎😎😎

[@Hadrianus-mq4jf]

Hello! What do I need to modify in order to generate more than 1 or all combinations of a 8 digit?

[@JoeWong81]

nice video bro

[@muthukumar8009]

Could you please make videos on Javascript Event Loop, Event Bubbling, Event cycle and deep dive into objects. Thanks in advance.

[@rangabharath4253]

Awesome

[@floriandollani4556]

In this code is a chance of not always getting what you want to include. Because you are using math.random() to randomly get characters from an array with all types of characters(if all are selected) and what if math.random() choses the same character always? this means even if you include all the options to get a random password you will not always get it.

[@suryapratapsingh5149]

Great

[@levius_631]

if i wanted to add a message that tells the user that must select one criteria option upon clicking the button, what would need to be added? Thank you!

[@bigbin1070]

question, how do you make sure there is numbers when you select numbers in the form?

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

[@rohanayush]

Using shuffle for the array formed before choosing random characters , brought better results. shuffle(array) { let currentIndex = array.length, randomIndex; // While there remain elements to shuffle. while (currentIndex != 0) { // Pick a remaining element. randomIndex = Math.floor(Math.random() * currentIndex); currentIndex--; // And swap it with the current element. [array[currentIndex], array[randomIndex]] = [ array[randomIndex], array[currentIndex]]; } return array; } just send in your ar to this function your_array= shuffle(your_array)

[@yassinesafraoui4540]

You could implement a copy to clipboard button 🤗

[@rafatulalam8677]

for some reason, using the concat method to join arrays hasnt worked for me but using the push + spread operators to join arrays has worked for me Ca anyone tell why

[@alialli8827]

how do i add a prompt included e,g. Use a symbol , Minium between 8 -128 letters , Use a upper case , Lower case

[@fricktion184]

21:39 Did he just put the ascii character codes for lowercase under uppercase?

[@fayojixe9925]

How do I open in live server?

[@a8109]

The button doesn't work when pressed. What is missing?

[@joem8355]

i get this error when i run it, any help? script.js:23 Uncaught ReferenceError: Cannot access 'characterAmount' before initialization at HTMLFormElement. (script.js:23)

[@jacobbeeson758]

how is it that his live demo is responsive? Every time I want to view the changes of my coding I have to manually refresh my page or reopen the window from my index.html file. His seems to be responsive as he inputs new code. I would love to be able to do this as it seems very handy.

[@kagenhearn9996]

For anybody else with this question he is using the Live Server extension for Visual Studio Code. It can be installed from within the VS Code application and then you can just right click on any open Html files you have in your editor and click "Open with Live Server". Then you will have a live demo.

[@justdevix5573]

Uncaught TypeError: Cannot read property 'addEventListener' of null Any help here? Please

[@FranzSarmiento17]

Still watching, but didn't you interchange the lowercase and uppercase character codes? at 21:26 Anyway minor error, but otherwise incredibly clear to understand video!! EDIT: Nvm, you found it out hahahaha

[@jackfrosty4932]

Create a password strength project please

[@romanjames8229]

really simple but my brain hurts lol

[@NaaGaboy]

You saw this on @TraversyMedia :)

[@mooder3247]

So !!!

[@mykalimba]

This is similar to the project on Traversy Media, but it's a different (i.e. better) implementation.

[@rafael_duma]

6:54 Ni Ni Ce Ce

[@xilongzhang6856]

the function syncCharacterAmount(e) has one argument, but when we use it in the event listener, why we don't pass any argument in the function? I am confused. Could someone explain?

[@xilongzhang6856]

I just find an answer, in case anyone is intrigued, "The event handler function, by default, when executed is passed the event object (that was created when the event/action you are interested in happened) as an argument. Defining the event as a parameter of your handler function is optional but, sometimes (most times), it is useful for the handler function to know about the event that happened. When you do define it this is the e you see in the functions like the ones you mentioned. Remember, the event is just a regular javascript object, with lots of properties on it."

[@fayojixe9925]

What program are you using? PS: sorry I’m completely new to this stuff

[@12caredee21]

Visual Studio Code

[@fndid337]

Create simple encrypt text in js and php pls 😀😀

[@eelguneezmemmedov1671]

Why is that always happening? I understand while u r coding but whenever i want to do it in myself i get stuck ... It hurts so much .

[@usama57926]

make a video on diff between var & let ......

[@WebDevSimplified]

I already have a video on that topic.

[@usama57926]

@@WebDevSimplified great

[@ragesrages8166]

but how can i enter on the site after i close microsoft studio????

[@omegamotivation144]

You need to open the html file in your browser. On windows use control + o then select the html file you used to make this

[@n3xxu5]

@Web Dev Simplified Thanks very much! This is a great video! However, it's a bit too fast and it would be great if you checked individual points instead of just writing down the code. Thank you for your great work!

[@emadalhamo]

Can you teach us how to make crosswords in JavaScript?

[@WebDevSimplified]

That is a great suggestion

[@samarthandsarthakbadola3968]

21:40

[@milakohen630]

js=> 14:40

[@gravitowl]

Hmm, having a weird problem here. It gives this error: main.js:27 Uncaught TypeError: Cannot read property 'checked' of null at HTMLFormElement. . I guess this means it can't find the form element, but i don't know why. The number range and input linking worked just fine, but it's the check boxes that won't work. Anybody got a solution? edit: accidentily put an capital I in 'include' instead of a lowercase i, fixed it!

[@vishalnadar3631]

forgot, Defer?

[@gravitowl]

@@vishalnadar3631 No, as explained at the Bottom i had a capital i instead of a non capital one

[@uimonk]

@@gravitowl follow this page for your answer kzbin.info/www/bejne/npPXnISiZadooNE

[@tlthiem]

While unlikely, with this method it is possible to generate an all lowercase password while having all options selected.

[@WebDevSimplified]

It is possible but highly unlikely especially for a long password.

[@TheGoldrebel]

Im here because youre handsome!

[@rasmadrak]

I found it easier to just type out the array of valid characters... But that's not as cool. :)

[@apulibaatawine3999]

Well taught. Please i want you to take me through how to create password show and hide using react js. Thank you.

[@kareemabdallah1502]

very fast ... too confusing :(

[@andrewwestgard2057]

Watch on half speed for a good laugh

[@robwolters7401]

See this link: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random Math.random() does not provide cryptographically secure random numbers. Do not use them for anything related to security. Use the Web Crypto API instead, and more precisely the window.crypto.getRandomValues() method.

[@abdalajammal3318]

change your name from simplified to complicate, its much better for u.

[@futtbucker2388]

whoops

[@alibalbars5177]

It needs a copy button

[@mohamedrifkan6525]

Your videos are superb ...but don't take too much of time to style form

[@dgua2917]

404 not found coming soon 😂😂😂😂

[@WebDevSimplified]

Looks like I forgot to add the end screens :P