How to Make a Password Generator using JavaScript?
Creating a password generator is a great project for beginners and intermediate developers alike. In this guide, we’ll walk you through how to create one using JavaScript, HTML, and a little bit of CSS.
Steps to Create a Password Generator
- Create the HTML Structure: First, we'll create a simple UI with input fields and a button.
- Write the JavaScript Logic: The password generator will require generating random characters from different sets (uppercase, lowercase, digits, and symbols).
- Style the UI with CSS: Lastly, we’ll add some simple styling to the generator.
Complete Code Example
Step 1: HTML Structure
We'll create the basic HTML layout with an input field to display the password, and buttons to generate and copy the password:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Password Generator</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
}
input, select {
width: 100%;
padding: 10px;
font-size: 16px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
margin: 2px;
padding: 10px;
font-size: 16px;
border: none;
background-color: #28a745;
color: white;
cursor: pointer;
width: 100%;
border-radius: 5px;
}
button:hover {
background-color: #218838;
}
.options {
margin-bottom: 10px;
}
label {
font-size: 14px;
display: block;
margin-bottom: 5px;
}
.strength {
margin: 10px 0;
}
.copied {
color: green;
display: none;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<h2>Password Generator</h2>
<input type="text" id="password" placeholder="Generated Password" readonly>
<label for="length">Password Length</label>
<select id="length">
<option value="8">8</option>
<option value="12" selected>12</option>
<option value="16">16</option>
<option value="20">20</option>
</select>
<div class="options">
<label><input type="checkbox" id="lowercase" checked> Include Lowercase</label>
<label><input type="checkbox" id="uppercase" checked> Include Uppercase</label>
<label><input type="checkbox" id="numbers" checked> Include Numbers</label>
<label><input type="checkbox" id="special" checked> Include Special Characters</label>
</div>
<button onclick="generatePassword()">Generate Password</button>
<button onclick="copyPassword()">Copy Password</button>
<div id="copiedMessage" class="copied">Password copied to clipboard</div>
<div class="strength" id="strengthDisplay">Strength: </div>
</div>
<script>
function generatePassword() {
const length = parseInt(document.getElementById("length").value);
const includeLowercase = document.getElementById("lowercase").checked;
const includeUppercase = document.getElementById("uppercase").checked;
const includeNumbers = document.getElementById("numbers").checked;
const includeSpecial = document.getElementById("special").checked;
let charset = "";
if (includeLowercase) charset += "abcdefghijklmnopqrstuvwxyz";
if (includeUppercase) charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
if (includeNumbers) charset += "0123456789";
if (includeSpecial) charset += "!@#$%^&*()_+";
if (charset === "") {
alert("Please select at least one character type.");
return;
}
let password = "";
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * charset.length);
password += charset[randomIndex];
}
document.getElementById("password").value = password;
updateStrength(password);
}
function copyPassword() {
const passwordField = document.getElementById("password");
if (!passwordField.value) {
alert("No password generated to copy.");
return;
}
passwordField.select();
passwordField.setSelectionRange(0, 99999); // For mobile devices
navigator.clipboard.writeText(passwordField.value);
document.getElementById("copiedMessage").style.display = "block";
setTimeout(() => {
document.getElementById("copiedMessage").style.display = "none";
}, 2000);
}
function updateStrength(password) {
const strengthDisplay = document.getElementById("strengthDisplay");
let strength = 0;
if (/[a-z]/.test(password)) strength++;
if (/[A-Z]/.test(password)) strength++;
if (/[0-9]/.test(password)) strength++;
if (/[^a-zA-Z0-9]/.test(password)) strength++;
let strengthText = "Weak";
if (strength === 2) strengthText = "Medium";
if (strength === 3) strengthText = "Strong";
if (strength === 4) strengthText = "Very Strong";
strengthDisplay.textContent = "Strength: " + strengthText;
}
</script>
</body>
</html>Step 2: JavaScript Logic
The JavaScript code handles the core functionality of generating the password. The generatePassword() function defines the charset and usesMath.random()to generate random characters from the set. It then outputs the result to the text input field.
Step 3: CSS Styling
The CSS code ensures that the password generator looks clean and responsive. We've added some simple styling to center the container and style the buttons and input fields.
Try It Yourself!
Copy the full code above, paste it into an HTML file, and open it in your browser to see the password generator in action. You can tweak the password length or charset to customize the output to your liking!
By following these steps, you can create a simple yet functional password generator with just HTML, CSS, and JavaScript. Feel free to experiment with additional features like toggling character types (e.g., uppercase only, or no symbols), password length selectors, and more!
You may also like
Creating a Password Generator in Python
In this blog, we explore the process of creating a password generato...
Continue readingHow can one effectively search for something on Google?
How can one effectively search for something on Google?
Continue reading