How to Create a Password Generator Web App with HTML, CSS, and JavaScript
In this Javascript tutorial, we will see how to create an interface to generate password.
This code allows users to set the desired length of the password by entering a number between 8 and 20 in the 'Password Length' input field and to choose which character types to include in the generated password by checking or unchecking the corresponding checkboxes.
Project Source Code:
<!DOCTYPE html>
<head>
<title>Password Generator</title>
<style>
body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f1f1f1;
}
.password-generator{ background-color: #fff; border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
max-width: 500px; margin: 0 auto; padding: 20px;
}
form{ display: flex; flex-direction: column; align-items: flex-start; }
label, input{ margin-bottom: 5px; }
input[type="number"],
input[type="checkbox"],
textarea, button{ border: none; padding: 10px; font-size: 16px; line-height: 1.5;
background-color: #f1f1f1; margin-bottom: 5px;border-radius: 5px;
}
label{ display: inline-flex; align-items: center;}
input[type="checkbox"]{ margin-left: 5px; }
button{ margin-top: 10px; background-color: #0075ff; color: #fff; cursor: pointer;
width: 100%; transition: all 0.3s ease
}
button:hover{ background-color: #0062cc; }
textarea{ width: 100%; font-size: 36px; text-align: center; box-sizing: border-box; }
</style>
</head>
<body>
<div class="password-generator">
<form>
<label for="length">Password Length:</label>
<input type="number" id="length" min="8" max="20" value="8">
<br>
<label for="uppercase">
<input type="checkbox" id="uppercase" checked>
Include uppercase letters
</label>
<br>
<label for="lowercase">
<input type="checkbox" id="lowercase" checked>
Include lowercase letters
</label>
<br>
<label for="numbers">
<input type="checkbox" id="numbers" checked>
Include numbers
</label>
<br>
<label for="symbols">
<input type="checkbox" id="symbols" checked>
Include symbols
</label>
<br>
<button type="button" id="genrate-pass-btn">Generate Password</button>
<br>
<textarea id="password" readonly></textarea>
</form>
</div>
<script>
// Get the "Generate Password" button and input fields for password length
// and character types
const generateBtn = document.getElementById("genrate-pass-btn");
const length = document.getElementById("length");
const password = document.getElementById("password");
const uppercase = document.getElementById("uppercase");
const lowercase = document.getElementById("lowercase");
const numbers = document.getElementById("numbers");
const symbols = document.getElementById("symbols");
// Create an object containing functions to generate each character type
const randomFunc = {
lower: getRandomLower,
upper: getRandomUpper,
number: getRandomNumber,
symbol: getRandomSymbol
}
// Add event listener to the "Generate Password" button
generateBtn.addEventListener("click", ()=>{
// Get the selected password length and character types
const lengthValue = +length.value;
const hasUpper = uppercase.checked;
const hasLower = lowercase.checked;
const hasNumber = numbers.checked;
const hasSymbol = symbols.checked;
// Generate a password using the selected length and character types
password.innerText = generatePassword(hasLower, hasUpper, hasNumber,
hasSymbol, lengthValue);
});
// Function to generate a password with the selected character types and length
function generatePassword(lower, upper, number, symbol, length)
{
let generatedPassword = "";
// Determine the number of character types selected
const typesCount = lower + upper + number + symbol;
// Create an array of objects for each selected character type
const typesArr = [{lower},{upper},{number},{symbol}].filter(
item => Object.values(item)[0]
);
// If no character types were selected, return an empty string
if(typesCount === 0){ return ""; }
// Loop through the password length,
// adding a random character for each selected character type
for(let i = 0; i < length; i+=typesCount)
{
typesArr.forEach(type => {
const funcName = Object.keys(type)[0];
generatedPassword += randomFunc[funcName]();
});
}
return generatedPassword;
}
// Function to generate a random lowercase letter
function getRandomLower(){
/*
Math.random() generates a random decimal number between 0 (inclusive) and 1 (exclusive).
Math.floor() rounds down the decimal number to the nearest integer.
(Math.random() * 26) generates a random decimal number between 0 and 25.
This is because there are 26 letters in the English alphabet.
Math.floor(Math.random() * 26) generates a random integer between 0 and 25.
Math.floor(Math.random() * 26) + 97 generates a random integer between 97 and 122.
This is because the ASCII code values for lowercase letters
'a' to 'z' are from 97 to 122.
String.fromCharCode() converts the ASCII code value into its corresponding character.
*/
return String.fromCharCode( Math.floor( Math.random() * 26 ) + 97);
}
// Function to generate a random uppercase letter
function getRandomUpper(){
/*
This function generates a random uppercase letter from the English alphabet
using the String.fromCharCode() method and the ASCII code for uppercase letters,
which is 65 to 90. It uses Math.random() to generate a random number between 0 and 1,
multiplies it by 26, and rounds it down to the nearest integer using Math.floor().
This random integer is added to 65 to get a random ASCII code for an uppercase letter,
which is then converted to a string using String.fromCharCode().
*/
return String.fromCharCode( Math.floor( Math.random() * 26 ) + 65);
}
// Function to generate a random number
function getRandomNumber(){
/*
The getRandomNumber() function generates a random number between 0 and 9
using Math.random(), multiplies it by 10 to get a number between 0 and 9.999,
and then rounds it down to the nearest integer using Math.floor().
The resulting number is then added to 48,
which is the ASCII code for the digit "0".
Finally, the function returns the character corresponding to that ASCII code
using String.fromCharCode(). So, the function generates a random digit character (0-9).
*/
return String.fromCharCode( Math.floor( Math.random() * 10 ) + 48);
}
// Function to generate a random symbol
function getRandomSymbol(){
/*
uses the Math.random() method to generate a random number between 0 and 1,
multiplies it by the length of the symbols string and rounds it down
to the nearest integer using the Math.floor() method.
This generates a random index that is used to select a random character
from the symbols string using array notation (symbols[index]).
*/
const symbols = "!@#$%^&*(){}[]=<>/,.";
return symbols[Math.floor(Math.random() * symbols.length)]
}
// Add event listener to copy password to clipboard when clicked
password.addEventListener("click", function(){
password.select();
document.execCommand("copy");
console.log("password copied to clipboard");
});
</script>
</body>
</html>
OUTPUT:
