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: https://github.com/WebDevSimplified/JavaScript-Password-Generator
Flexbox Tutorial: https://youtu.be/fYq5PXgSsbE
CSS Grid Tutorial: https://youtu.be/9zBsdzdE4sM
🧠 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: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
#PasswordGenerator #WDS #JavaScript
Original source
21 responses to “Build A Password Generator With JavaScript – Tutorial”
Thanks for this productive video. Keep it up.
Dude, you have same content in this channel https://www.youtube.com/watch?v=kQuq7IE8hHI
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?
What an amazing video! Please keep making these videos with no js frameworks, they are great!
Thanks for the best design too, Kyle. You are my best teaching YouTuber ever 🤩
Could you please make videos on Javascript Event Loop, Event Bubbling, Event cycle and deep dive into objects. Thanks in advance.
Watched this at playback speed of 1.75x still I can understand his clear instructions. Thanks Kyle.
While unlikely, with this method it is possible to generate an all lowercase password while having all options selected.
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.
Congrats on 100K subs dude 🎉🎉you deserve more! 🎊🎊🎊
nice video bro
Your videos are superb …but don't take too much of time to style form
6:54
Ni Ni Ce Ce
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.
Can we build custom CDN links to serve CSS and js files?
Dammit!!
Too good🙌
Nice 👍! 😎😎😎
This is awesome bro
25:39 characterChode 😳 nice vid
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.
Nice