This content originally appeared on DEV Community 👩💻👨💻 and was authored by Walter Nascimento
Using JavaScript, let's create a Password Generator
Code
HTML
<h2>Password Generator</h2>
<fieldset>
<legend>Password</legend>
<div id="resultEl"></div>
<button id="generateEl">Generate password</button>
</fieldset>
<fieldset>
<legend>Length</legend>
<label>Length</label>
<input type="number" id="lengthEl" min="1" />
</fieldset>
<fieldset>
<legend>Include</legend>
<div>
<label>uppercase</label>
<input type="checkbox" id="uppercaseEl" checked />
</div>
<div>
<label>lowercase</label>
<input type="checkbox" id="lowercaseEl" checked />
</div>
<div>
<label>numbers</label>
<input type="checkbox" id="numberEl" checked />
</div>
<div>
<label>symbols</label>
<input type="checkbox" id="symbolEl" checked />
</div>
</fieldset>
The user can define the length of the password to be generated using a numerical input field. It is also possible to select which types of characters should be included in the password: uppercase letters, lowercase letters, numbers and symbols. The "Generate Password" button is used to start the password generation process. The result of generating the password is displayed in a div with the ID "resultEl".
JS
The following code is a password generator that allows users to specify the length and character types of the password.
Function: generatePassword
generateEl.addEventListener('click', generatePassword);
This function is triggered when the user clicks the "Generate password" button. It starts by defining an object called randomFunc:
let randomFunc = {
randomLower: () => tableASCII(26, 97),
randomUpper: () => tableASCII(26, 65),
randomNumber: () => tableASCII(10, 48),
randomSymbol: () => randomSymbol(),
};
randomFunc has four properties, each of which refers to a function that returns a random character:
- randomLower returns a random lowercase letter
- randomUpper returns a random uppercase letter
- randomNumber returns a random number
- randomSymbol returns a random symbol
The function then checks if the user has selected each of these options by checking the state of the corresponding checkboxes:
!lowercaseEl.checked && delete randomFunc.randomLower;
!uppercaseEl.checked && delete randomFunc.randomUpper;
!numberEl.checked && delete randomFunc.randomNumber;
!symbolEl.checked && delete randomFunc.randomSymbol;
If the user has not selected a certain option, the corresponding property is deleted from the randomFunc object. This ensures that the password only contains the characters that the user has selected.
Finally, the function calls the randomPassword function and passes the length of the password and the randomFunc object as arguments:
resultEl.innerText = randomPassword(lengthEl.value, randomFunc);
Function: randomPassword
The randomPassword function generates the password by looping through the desired length and concatenating a random character generated by the randomObject function.
function randomPassword(length, randomFunc) {
try {
let generatedPassword = '';
for (let i = 0; i < length; i++) {
generatedPassword += randomObject(randomFunc)();
}
return generatedPassword;
} catch (e) {
console.warn(e);
return 'Marque pelo menos um item';
}
}
Function: randomObject
The randomObject function takes an object as an argument and returns a random property from that object.
const randomObject = (obj) =>
obj[Object.keys(obj)[Math.floor(Math.random() * Object.keys(obj).length)]];
Function: tableASCII
The tableASCII function is used to generate random characters from the ASCII table. It takes two arguments: the number of characters in the table and the starting character code.
const tableASCII = (ini, start) =>
String.fromCharCode(Math.floor(Math.random() * ini) + start);
Function: randomSymbol
The randomSymbol function returns a random symbol from a predefined string of symbols.
function randomSymbol() {
const symbols = '
Demo
See below for the complete working project.
💡 NOTE: If you can't see it click here and see the final result
Thanks for reading!
If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!
😊😊 See you later! 😊😊
Support Me
Youtube - WalterNascimentoBarroso
Github - WalterNascimentoBarroso
Codepen - WalterNascimentoBarroso
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Walter Nascimento
Walter Nascimento | Sciencx (2023-02-08T02:28:16+00:00) Password Generator with js. Retrieved from https://www.scien.cx/2023/02/08/password-generator-with-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.