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.
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
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!
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!!!
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.
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 '
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)
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 @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!
@@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.
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.
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🙌
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
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?
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
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?
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.
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.
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
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) {
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
@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!
Thanks for putting the tutorial together. :) Is there a way to Password Protect online videos (RUclips, 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.
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!
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.
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?
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."
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)
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
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!
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.
![Noob To Max With DRAGON REWORK In Blox Fruits [FULL MOVIE]](http://i.ytimg.com/vi/LnBMOinoOvA/mqdefault.jpg)
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.
Can't agree more!
Agree! ❤️
Man I honestly admire you.
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
Thank you so much!
Watched this at playback speed of 1.75x still I can understand his clear instructions. Thanks Kyle.
25:39 characterChode 😳 nice vid
Only people from the Subcontinent can understand that 😁
What an amazing video! Please keep making these videos with no js frameworks, they are great!
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!
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!!!
Thanks for the best design too, Kyle. You are my best teaching RUclipsr ever 🤩
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.
man you make coding seem so simple...am doing a simple password demo, would not have thought of using character codes...Awesome tutorial bro.
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 '
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)
Congrats on 100K subs dude 🎉🎉you deserve more! 🎊🎊🎊
Thank you! I am still shocked that so many people learn from and enjoy my content.
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
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.
I like this implementation as it is.
@@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!
Quality assurance engineer spotted :D
@@Dimm88 yes I was in QA role for few years and then moved to full stack development :)
@@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.
Bro! As a beginner in full stack bootcamp… ur tutorials are absolutely incredible 🔥👨🏻💻🚀… thanks 🙏🏽
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.
I like how at the end he said it was a really simple password generator
Thank you so much I’m working on a similar assignment right now in my boot camp this really helped
sir your videos are really helpfull
Dude you need to make a javascript course your explanations are awesome
Awesome, loved how you developed it, finally I'm taking interest in two things I always feared JavaScript and CSS
thank you so much, teacher
Great work, man, I am working on the same project currently
I love you man your literally a savior
Thanks for this productive video. Keep it up.
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👍
The button doesn't work when pressed. What is missing?
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🙌
Thanks, you explain very well congratulations
Awesome!! Thanks for an enjoyable video!
Waaw you are really amazing man!!!
thank u so much sir
You are awesome dude ❤❤
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
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?
Very Nice video!
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
21:39 Did he just put the ascii character codes for lowercase under uppercase?
Nice 👍! 😎😎😎
I came here to practice JavaScript and now I'm more interested in CSS
Hello! What do I need to modify in order to generate more than 1 or all combinations of a 8 digit?
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?
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.
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.
Thanks brother!
This is awesome bro
you are the best ;) thanks
You saw this on @TraversyMedia :)
So !!!
This is similar to the project on Traversy Media, but it's a different (i.e. better) implementation.
All I can say his He is just Great
Could you please make videos on Javascript Event Loop, Event Bubbling, Event cycle and deep dive into objects. Thanks in advance.
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
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)
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
thank you so much
@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!
question, how do you make sure there is numbers when you select numbers in the form?
Thanks for putting the tutorial together. :)
Is there a way to Password Protect online videos (RUclips, 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.
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!
you are awesome..
What program are you using?
PS: sorry I’m completely new to this stuff
Visual Studio Code
make a video on diff between var & let ......
I already have a video on that topic.
@@WebDevSimplified great
Dammit!!
Too good🙌
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.
nice video bro
How do I open in live server?
Can you teach us how to make crosswords in JavaScript?
That is a great suggestion
6:54
Ni Ni Ce Ce
You could implement a copy to clipboard button 🤗
Create a password strength project please
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?
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."
how do i add a prompt included e,g. Use a symbol , Minium between 8 -128 letters , Use a upper case , Lower case
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)
Uncaught TypeError: Cannot read property 'addEventListener' of null
Any help here? Please
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
Great
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 .
but how can i enter on the site after i close microsoft studio????
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
really simple but my brain hurts lol
Awesome
js=> 14:40
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!
forgot, Defer?
@@vishalnadar3631 No, as explained at the Bottom i had a capital i instead of a non capital one
@@gravitowl follow this page for your answer
ruclips.net/video/hbtkQl0B5jo/видео.html
Im here because youre handsome!
Create simple encrypt text in js and php pls 😀😀
21:40
While unlikely, with this method it is possible to generate an all lowercase password while having all options selected.
It is possible but highly unlikely especially for a long password.
Well taught.
Please i want you to take me through how to create password show and hide using react js.
Thank you.
very fast ... too confusing :(
I found it easier to just type out the array of valid characters... But that's not as cool. :)
404 not found coming soon 😂😂😂😂
Looks like I forgot to add the end screens :P
Watch on half speed for a good laugh
Your videos are superb ...but don't take too much of time to style form
It needs a copy button
change your name from simplified to complicate, its much better for u.
whoops
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.