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:

🧠 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:

#PasswordGenerator #WDS #JavaScript

[ponrajs]

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

[mattburke]

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!

[gager]

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

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

[antoniamesesan]

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

[mrviometal]

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

I also like how you spot mistakes in your code as you make them and smoothly say that this is not correct and fix them xD
keep it up man ^_^

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

[ericzorn]

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.

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

[kelvezu]

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

[justinbush]

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

[saqibmabbasi]

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

[willmeow]

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 '<' out of my array via filter(x => x != '<').

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

[rolando]

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

[JuanPerez-nsjz]

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

[BekBrace]

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

[mmushtaq]

Thanks for this productive video. Keep it up.

[tryndamere]

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

[digigoliath]

Awesome!! Thanks for an enjoyable video!