Hello Coders, in this tutorial we will learn How to Create a Random Password Generator in HTML CSS & JavaScript. If you know a little JavaScript and are looking for an easy, yet interesting project, this one might be for you. This might help you work on a Create a Age Calculator Using HTML, CSS and JavaScript.
A password generator is a type of software, either a web-based tool or a mobile application, which can either randomly generate or create a password based on user specifications. It is used to make the generation of passwords a lot easier by ensuring that the password generated is strong enough to withstand numerous types of attacks. Password generators rely on algorithms to generate a random arrangement of characters of a given length which usually satisfies most security protocols.
In case you are not acquainted with a password generator, it is a type of software or tool designed to generate custom passwords or random passwords for users. Such passwords are composed of various character sets which include letters, numbers, symbols, etc.
This application allows users to generate passwords according to the number of characters they wish to provide and their preferred setting such as including lower and upper case letters, numeric values, etc. There is also an option to show the strength of the users password and finally, the user can copy their password to the clipboard directly.
What You’ll Learn:
- Structure the Random Password Generator with HTML
- Style the Random Password Generator using CSS
- How to make the Random Password Generator functional with JavaScript
Step 1 : Structure the Random Password Generator with HTML
Start by creating a new file called (index.html). Then, copy and paste the HTML code provided into this file. Remember to save it with the (.html) extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Secure Password</h1>
<p>Generate strong, secure passwords instantly</p>
</div>
<div class="password-display">
<div class="password-output" id="passwordOutput">
Click "Generate Password" to create a secure password
</div>
<button class="copy-btn" id="copyBtn" onclick="copyPassword()">📋 Copy</button>
</div>
<div class="options">
<div class="length-group">
<label>Length:</label>
<input type="range" class="length-slider" id="lengthSlider" min="4" max="50" value="16" oninput="updateLength()">
<span class="length-value" id="lengthValue">16</span>
</div>
<div class="checkbox-group">
<div class="checkbox-item">
<input type="checkbox" id="uppercase" checked>
<label for="uppercase">Uppercase (A-Z)</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="lowercase" checked>
<label for="lowercase">Lowercase (a-z)</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="numbers" checked>
<label for="numbers">Numbers (0-9)</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="symbols" checked>
<label for="symbols">Symbols (!@#$...)</label>
</div>
</div>
</div>
<button class="generate-btn" onclick="generatePassword()">
⚡ Generate Password
</button>
<div class="strength-meter">
<div class="strength-bar">
<div class="strength-fill" id="strengthFill"></div>
</div>
<div class="strength-text" id="strengthText">Password strength will appear here</div>
</div>
</div>
<div class="toast" id="toast">Password copied to clipboard! ✅</div>
<script src="script.js"></script>
</body>
</html>
Step 2 : Style the Random Password Generator using CSS
Create a new file called (style.css) and copy the provided code into this file. Don’t forget to save it with the (.css) extension.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
max-width: 500px;
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.header {
text-align: center;
margin-bottom: 30px;
}
.header h1 {
color: #333;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.header p {
color: #666;
font-size: 1rem;
}
.password-display {
position: relative;
margin-bottom: 30px;
}
.password-output {
background: #f8f9fa;
border: 2px solid #e9ecef;
border-radius: 12px;
padding: 20px;
font-family: 'Courier New', monospace;
font-size: 1.2rem;
font-weight: 600;
color: #333;
word-break: break-all;
min-height: 60px;
display: flex;
align-items: center;
transition: all 0.3s ease;
}
.password-output.generated {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
color: white;
border-color: #4facfe;
transform: scale(1.02);
}
.copy-btn {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
background: #667eea;
color: white;
border: none;
border-radius: 8px;
padding: 8px 12px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.3s ease;
opacity: 0;
}
.password-output.generated + .copy-btn {
opacity: 1;
}
.copy-btn:hover {
background: #5a6fd8;
transform: translateY(-50%) scale(1.05);
}
.options {
margin-bottom: 30px;
}
.option-group {
margin-bottom: 20px;
}
.length-group {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.length-group label {
color: #333;
font-weight: 600;
min-width: 60px;
}
.length-slider {
flex: 1;
height: 6px;
background: #e9ecef;
border-radius: 3px;
outline: none;
-webkit-appearance: none;
}
.length-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 50%;
cursor: pointer;
}
.length-value {
background: #667eea;
color: white;
padding: 5px 12px;
border-radius: 20px;
font-weight: 600;
min-width: 40px;
text-align: center;
}
.checkbox-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.checkbox-item {
display: flex;
align-items: center;
gap: 10px;
}
.checkbox-item input[type="checkbox"] {
width: 20px;
height: 20px;
accent-color: #667eea;
cursor: pointer;
}
.checkbox-item label {
color: #333;
font-weight: 500;
cursor: pointer;
}
.generate-btn {
width: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 12px;
padding: 18px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}
.generate-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}
.generate-btn:active {
transform: translateY(0);
}
.strength-meter {
margin-top: 20px;
text-align: center;
}
.strength-bar {
height: 8px;
background: #e9ecef;
border-radius: 4px;
overflow: hidden;
margin: 10px 0;
}
.strength-fill {
height: 100%;
transition: all 0.5s ease;
border-radius: 4px;
}
.strength-weak { background: #ff4757; width: 25%; }
.strength-fair { background: #ffa502; width: 50%; }
.strength-good { background: #2ed573; width: 75%; }
.strength-strong { background: #5352ed; width: 100%; }
.strength-text {
font-weight: 600;
margin-top: 5px;
}
.toast {
position: fixed;
top: 20px;
right: 20px;
background: #2ed573;
color: white;
padding: 15px 20px;
border-radius: 10px;
font-weight: 600;
transform: translateX(400px);
transition: all 0.3s ease;
z-index: 1000;
}
.toast.show {
transform: translateX(0);
}
@media (max-width: 600px) {
.container {
padding: 30px 20px;
}
.header h1 {
font-size: 2rem;
}
.checkbox-group {
grid-template-columns: 1fr;
}
}
Step 3 : How to make the Random Password Generator functional with JavaScript
Create a new file named (script.js), then copy and paste the JavaScript code into this file. Be sure to save it with the (.js) extension.
const uppercaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const lowercaseChars = 'abcdefghijklmnopqrstuvwxyz';
const numberChars = '0123456789';
const symbolChars = '!@#$%^&*()_+-=[]{}|;:,.<>?';
function updateLength() {
const slider = document.getElementById('lengthSlider');
const valueSpan = document.getElementById('lengthValue');
valueSpan.textContent = slider.value;
}
function generatePassword() {
const length = parseInt(document.getElementById('lengthSlider').value);
const useUppercase = document.getElementById('uppercase').checked;
const useLowercase = document.getElementById('lowercase').checked;
const useNumbers = document.getElementById('numbers').checked;
const useSymbols = document.getElementById('symbols').checked;
if (!useUppercase && !useLowercase && !useNumbers && !useSymbols) {
alert('Please select at least one character type!');
return;
}
let charset = '';
let requiredChars = '';
if (useUppercase) {
charset += uppercaseChars;
requiredChars += uppercaseChars[Math.floor(Math.random() * uppercaseChars.length)];
}
if (useLowercase) {
charset += lowercaseChars;
requiredChars += lowercaseChars[Math.floor(Math.random() * lowercaseChars.length)];
}
if (useNumbers) {
charset += numberChars;
requiredChars += numberChars[Math.floor(Math.random() * numberChars.length)];
}
if (useSymbols) {
charset += symbolChars;
requiredChars += symbolChars[Math.floor(Math.random() * symbolChars.length)];
}
let password = requiredChars;
for (let i = requiredChars.length; i < length; i++) {
password += charset[Math.floor(Math.random() * charset.length)];
}
// Shuffle the password
password = password.split('').sort(() => Math.random() - 0.5).join('');
const passwordOutput = document.getElementById('passwordOutput');
passwordOutput.textContent = password;
passwordOutput.classList.add('generated');
updateStrengthMeter(password);
}
function updateStrengthMeter(password) {
const strengthFill = document.getElementById('strengthFill');
const strengthText = document.getElementById('strengthText');
let score = 0;
let feedback = '';
// Length scoring
if (password.length >= 8) score += 1;
if (password.length >= 12) score += 1;
if (password.length >= 16) score += 1;
// Character variety scoring
if (/[a-z]/.test(password)) score += 1;
if (/[A-Z]/.test(password)) score += 1;
if (/[0-9]/.test(password)) score += 1;
if (/[^A-Za-z0-9]/.test(password)) score += 1;
// Remove all existing strength classes
strengthFill.className = 'strength-fill';
if (score <= 3) {
strengthFill.classList.add('strength-weak');
feedback = 'Weak Password';
strengthText.style.color = '#ff4757';
} else if (score <= 5) {
strengthFill.classList.add('strength-fair');
feedback = 'Fair Password';
strengthText.style.color = '#ffa502';
} else if (score <= 6) {
strengthFill.classList.add('strength-good');
feedback = 'Good Password';
strengthText.style.color = '#2ed573';
} else {
strengthFill.classList.add('strength-strong');
feedback = 'Strong Password';
strengthText.style.color = '#5352ed';
}
strengthText.textContent = feedback;
}
function copyPassword() {
const passwordOutput = document.getElementById('passwordOutput');
const password = passwordOutput.textContent;
if (password && password !== "Click \"Generate Password\" to create a secure password") {
navigator.clipboard.writeText(password).then(() => {
showToast();
}).catch(() => {
// Fallback for older browsers
const textArea = document.createElement('textarea');
textArea.value = password;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
showToast();
});
}
}
function showToast() {
const toast = document.getElementById('toast');
toast.classList.add('show');
setTimeout(() => {
toast.classList.remove('show');
}, 3000);
}
// Generate a password on page load
window.onload = function() {
generatePassword();
};
Final Conclusion
You can now consider yourself on step 3 of the HTML CSS & JavaScript Random Password Generator. In case your code is not working or you are facing issues, feel free to click the download link to the files provided. That’s free of charge, and a zip file will immediately download that contains the project folder along with the source code files.
Happy Coding!
