Build a JavaScript random password generator 🔑

#javascript #course #tutorial
This is a project for beginners to generate pseudo-random passwords.
Object-Oriented Programming is not included in this specific exercise.

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

[@pogmij]

Appreciate that, thanks man

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

[@hunin27]

thanks bro!

[@Blitz61wasd]

Cool

[@raitaskeen]

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

[@toufiktoufik8342]

Thank you bro

[@drzion247]

welldone Brou!!!!!!!

[@natnaeltaye]

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

[@hlahtunthein2830]

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

[@jerricvaleroso8835]

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

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

[@raphaelsousa2046]

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

[@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 = "@#$%&*!?>

[@raitaskeen]

Typescript...!

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