• Thursday , 28 May 2020

Build A Password Generator With JavaScript – Tutorial

Code Canyon

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

3d Ocean

Related Posts


  1. Muhammad Mushtaq Sheikh
    December 22, 2019 at 20:09

    Thanks for this productive video. Keep it up.

    December 22, 2019 at 20:09

    Dude, you have same content in this channel https://www.youtube.com/watch?v=kQuq7IE8hHI

  3. FuTTiiZ
    December 22, 2019 at 20:09

    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?

  4. Pablo
    December 22, 2019 at 20:09

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

  5. ponraj s
    December 22, 2019 at 20:09

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

  6. Muthu Kumar
    December 22, 2019 at 20:09

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

    December 22, 2019 at 20:09

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

  8. denkquer
    December 22, 2019 at 20:09

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

  9. Yi Sheng Siow
    December 22, 2019 at 20:09

    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.

  10. Tryndamere
    December 22, 2019 at 20:09

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

  11. Joe Wong
    December 22, 2019 at 20:09

    nice video bro

  12. Mohamed Rifkan
    December 22, 2019 at 20:09

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

  13. Rafael Duma
    December 22, 2019 at 20:09

    Ni Ni Ce Ce

  14. Swarup Mahapatra
    December 22, 2019 at 20:09

    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.

  15. simhadri suneel
    December 22, 2019 at 20:09

    Can we build custom CDN links to serve CSS and js files?

  16. mohammed sadiq
    December 22, 2019 at 20:09

    Too good🙌

  17. Ajith kumar
    December 22, 2019 at 20:09

    Nice 👍! 😎😎😎

  18. Obua Emmanuel
    December 22, 2019 at 20:09

    This is awesome bro

  19. steinar
    December 22, 2019 at 20:09

    25:39 characterChode 😳 nice vid

  20. Eric Zorn
    December 22, 2019 at 20:09

    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.

  21. knowledge
    December 22, 2019 at 20:09


Leave A Comment

You must be logged in to post a comment.