HTML Code:
<!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
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="container text-center">
<div class="card shadow-lg p-4">
<h3 class="mb-3 fs-4">Password Generator</h3>
<div class="input-group mb-3">
<input
type="text"
id="generated-password"
class="form-control"
readonly
/>
<span
class="input-group-text copy-icon"
id="copy-password"
title="Copy Password"
>
<i class="fa fa-copy"></i>
</span>
</div>
<div class="mb-3" style="position: relative">
<span class="strength-bar"></span>
<div
class="password-strength"
id="password-strength"
style="width: 0%"
></div>
</div>
<div class="mb-3">
<div class="mb-3">
<label
for="password-length"
class="form-label text-start w-100 fw-semibold mb-1"
>Password Length: <span id="length-display">12</span></label
>
<input
type="range"
id="password-length"
class="form-range"
min="6"
max="32"
value="12"
/>
</div>
<h2 class="form-label text-start fs-6 fw-semibold">
Password Settings
</h2>
<div class="d-flex justify-content-between">
<div
class="d-flex align-items-center justify-content-start flex-column"
>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="include-numbers"
/>
<label class="form-check-label" for="include-numbers"
>Include Numbers</label
>
</div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="include-capital-letters"
/>
<label class="form-check-label" for="include-capital-letters"
>Include Capital Letters</label
>
</div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="include-symbols"
/>
<label class="form-check-label" for="include-symbols"
>Include Symbols</label
>
</div>
</div>
<div
class="d-flex align-items-center justify-content-start flex-column"
>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="exclude-similar-characters"
/>
<label class="form-check-label" for="exclude-similar-characters"
>Exclude Similar</label
>
</div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="avoid-repeated-characters"
/>
<label class="form-check-label" for="avoid-repeated-characters"
>Avoid Repeated
</label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="must-have-special"
/>
<label class="form-check-label" for="must-have-special"
>Special Character(s)</label
>
</div>
</div>
</div>
</div>
<button class="btn btn-primary w-100" id="generate-password">
Generate Password
</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
CSS Code:
body {
background-color: #0093e9;
background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.password-strength {
position: relative;
z-index: 2;
height: 6px;
border-radius: 4px;
transition: width 0.3s ease-in-out;
}
.strength-bar {
position: absolute;
width: 100%;
left: 0;
top: 0;
height: 6px;
background-color: #f5f5f5;
border-radius: 20px;
z-index: 1;
}
.copy-icon {
cursor: pointer;
}
.form-check {
display: flex;
gap: 10px;
width: 100%;
}
.card {
width: 420px;
margin: auto;
}
#password-length::-webkit-slider-thumb {
background-color: #0d6efd;
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
margin-top: -6px;
}
#password-length::-webkit-slider-runnable-track {
background-color: #8ec5fc;
background-image: linear-gradient(62deg, #8ec5fc 0%, #e0c3fc 100%);
height: 6px;
border-radius: 4px;
}
Javascript Code:
const passwordField = document.getElementById("generated-password");
const strengthBar = document.getElementById("password-strength");
const copyIcon = document.getElementById("copy-password");
const iconElement = copyIcon.querySelector("i");
const lengthRange = document.getElementById("password-length");
const lengthDisplay = document.getElementById("length-display");
lengthRange.addEventListener("input", () => {
lengthDisplay.textContent = lengthRange.value;
});
function updateStrengthBar(password) {
const length = password.length;
let score = 0;
if (/[A-Z]/.test(password)) score++;
if (/[a-z]/.test(password)) score++;
if (/[0-9]/.test(password)) score++;
if (/[^a-zA-Z0-9]/.test(password)) score++;
if (length >= 12) score++;
const colors = [
"bg-danger",
"bg-warning",
"bg-info",
"bg-primary",
"bg-success",
];
strengthBar.className = `password-strength ${
colors[score - 1] || "bg-danger"
}`;
strengthBar.style.width = `${(score / 5) * 100}%`;
}
function generatePassword() {
const includeNumbers =
document.getElementById("include-numbers").checked;
const includeCapitalLetters = document.getElementById(
"include-capital-letters"
).checked;
const includeSymbols =
document.getElementById("include-symbols").checked;
const excludeSimilarCharacters = document.getElementById(
"exclude-similar-characters"
).checked;
const avoidRepeatedCharacters = document.getElementById(
"avoid-repeated-characters"
).checked;
const mustHaveSpecial =
document.getElementById("must-have-special").checked;
const passwordLength = parseInt(lengthRange.value, 10);
let characters = "abcdefghijklmnopqrstuvwxyz";
if (includeNumbers) characters += "0123456789";
if (includeCapitalLetters) characters += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
if (includeSymbols) characters += "!@#$%^&*()_+[]{}|;:,.<>?";
if (excludeSimilarCharacters)
characters = characters.replace(/[0O1lI]/g, "");
let password = "";
while (password.length < passwordLength) {
let char = characters.charAt(
Math.floor(Math.random() * characters.length)
);
if (avoidRepeatedCharacters && password.endsWith(char)) continue;
password += char;
}
if (mustHaveSpecial && !/[!@#$%^&*()_+\[\]{}|;:,.<>?]/.test(password)) {
const specialChars = "!@#$%^&*()_+[]{}|;:,.<>?";
password =
password.slice(0, -1) +
specialChars.charAt(
Math.floor(Math.random() * specialChars.length)
);
}
passwordField.value = password;
updateStrengthBar(password);
}
function copyPasswordToClipboard() {
if (passwordField.value) {
navigator.clipboard.writeText(passwordField.value).then(() => {
iconElement.className = "fa fa-check";
setTimeout(() => {
iconElement.className = "fa fa-copy";
}, 2000);
});
}
}
document
.getElementById("generate-password")
.addEventListener("click", generatePassword);
copyIcon.addEventListener("click", copyPasswordToClipboard);Happy Coding . Don’t forget to follow me on instagram