Build a JavaScript random password generator 🔑

[@BroCodez]

// RANDOM PASSWORD GENERATOR function generatePassword(length, includeLowercase, includeUppercase, includeNumbers, includeSymbols){ const lowercaseChars = "abcdefghijklmnopqrstuvwxyz"; const uppercaseChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; const numberChars = "0123456789"; const symbolChars = "!@#$%^&*()_+-="; let allowedChars = ""; let password = ""; allowedChars += includeLowercase ? lowercaseChars : ""; allowedChars += includeUppercase ? uppercaseChars : ""; allowedChars += includeNumbers ? numberChars : ""; allowedChars += includeSymbols ? symbolChars : ""; if(length

[@Knightd-d9m]

Wonderful bro!!! Can you please make a full course on React, Angular, Node..Please

[@leestanford2452]

This is the first lesson that lost me. the string concatenation with the ternery operators portion is not really clicking yet.

[@hunin27]

Hey just a question, when i was learning python some months ago, i found out that for passwords its better to use secrets.choice instead of random.choice as it is more suited for passwords, is there such a thing in javascript? thanks!

[@nguyenphulam2849]

Can you please make a full course on Angular, NodeJS Broo pls

[@pogmij]

Appreciate that, thanks man

[@emmanueloyenuga2047]

I was looking at this code and I understand the concept for the most part of it but the function generatePassword, you passed the argument length into the function but unlike the other arguments passed, Length was not declared, I was expecting passwordLength would have been passed instead. I would appreciate clarity on that please. Thank you 🙏 When calling the function at the bottom you called passwordLength

[@musablodhi6526]

I see what you're saying! In JavaScript, when you define a function, you can name the arguments however you like. In the example from the video, the function generatePassword uses the argument length, but you could also name it passwordLength if you prefer. The key is to stay consistent in both the function definition and when calling the function. In the video, the parameter is named length, so when calling the function, you should pass the value into length (or passwordLength, if you rename it). Just make sure the names match. Hope that clears it up!

[@raitaskeen]

Bro Code Please make a video on TypeScript Kindly...

[@piotrmazgaj]

This is my seal. I have watched the entire video, understood it, and I can explain it in my own words, thus I have gained knowledge. This is my seal.

[@Blitz61wasd]

Cool

[@jerricvaleroso8835]

I tried this program in java. More steps than JS.

[@toufiktoufik8342]

Thank you bro

[@hlahtunthein2830]

sir, can we get this tutorial with some html css UIs please?

[@drzion247]

welldone Brou!!!!!!!

[@raphaelsousa2046]

the loop that creates the password is kinda complex but i guess i got it

[@AmitUtkarsh99]

but this code doesnt ensure that if a set of character type is true it would be included in the password

[@hunin27]

thanks bro!

[@natnaeltaye]

yo bro i set "includeSymbols" to be false and still appears on console.log, why does this happen?

[@arnavsail]

how do i display this password in my web page?

[@tharunkumar8507]

You can display by using window.write() to display on your web page

[@ronitghosh9461]

Password Generator * { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; font-size: large; } .center { display: flex; justify-content: center; } h2 { font-size: 30px; font-weight: 800; text-align: center; color: #2d4059; } form { box-shadow: 5px 5px 15px; border-radius: 10px; width: 500px; height: 550px; padding: 5px; } .radioButtons { margin: 15px; margin-left: 40px; color: #222831; } input { margin: 5px; } #length { width: 80%; height: 40px; border-radius: 10px; border: none; background-color: #eeeeee; text-align: center; font-size: 25px; color: #222831; } #length:hover { box-shadow: inset 1px 1px 6px rgb(66, 66, 66); border: none; } #length:active { box-shadow: inset 1px 1px 6px rgb(66, 66, 66); border: none; } .characterLength { display: flex; flex-direction: column; align-items: center; font-size: 25px; font-weight: 700; color: #222831; } button { width: 400px; height: 40px; margin: 10px; border: none; border-radius: 10px; font-size: large; background-color: #222831; color: #eeeeee; } button:hover { background-color: #3b4555; } button:active { background-color: #54647c; color: #eeeeee; } .password { width: 400px; height: 60px; margin: 10px; border-radius: 10px; background-color: #eeeeee; color: #222831; display: flex; justify-content: center; align-items: center; overflow: auto; font-size: larger; padding: 2px; } @media (max-width:600px) { form { width: 90vw; overflow: auto; } h2 { margin-left: 10px; margin-right: 10px; } } PASSSWORD GENERATOR Characters Length: Lowercase Characters Uppercase Characters Numerical Characters Symbols Generate Copy function generatePassword() { const length = Number(document.querySelector("#length").value); const lowercase = document.querySelector("#lowercase").checked; const uppercase = document.querySelector("#uppercase").checked; const numeric = document.querySelector("#numeric").checked; const symbols = document.querySelector("#symbol").checked; const printAns = document.querySelector(".password"); const pass = randomPass(length, lowercase, uppercase, numeric, symbols); if (!lowercase && !uppercase && !numeric && !symbols) { printAns.textContent = "Please check at least one option"; return; // Stop execution } printAns.textContent = pass; } //Random Password Funtion function randomPass(length, lowercase, uppercase, numeric, symbols) { const lowercaseChars = "abcdefghijklmnopqrstuvwxyz"; const uppercaseChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; const numericalChars = "1234567890"; const symbolChars = "@#$%&*!?>

[@RhemaOshogwe]

Flutter

[@DhanaLakshmi-tz6mg]

Could you please talk slowly ,so that it is easy for us to understand ....

[@chiggywiggy524]

Turn on captions

[@uchegodswill397]

You can reduce the speed by clicking on settings and playback speed

[@raitaskeen]

Typescript...!