As a developer, I love building practical tools that improve efficiency. One such project I recently completed is a Responsive Password Generator using HTML, CSS, and JavaScript. It allows users to generate strong, random passwords with customizable options.
I will explain the code behind this project and enhance it with additional practical functionalities.
Features of the Password Generator
- Generates random passwords with letters, numbers, and symbols.
- Allows users to select the length of the password.
- Provides options to include uppercase, lowercase, numbers, and special characters.
- Responsive design for mobile and desktop devices.
- Copy-to-clipboard functionality for easy use.
The project consists of three main files:
- index.html (Structure)
- style.css (Styling)
- script.js (Logic)
Let’s break down each file and enhance it with extra features.
HTML Structure (index.html)
<!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">
<h2>Password Generator</h2>
<div class="output">
<input type="text" id="password" readonly>
<button onclick="copyPassword()">Copy</button>
</div>
<div class="settings">
<label>Password Length: <span id="lengthValue">12</span></label>
<input type="range" id="length" min="6" max="20" value="12" onchange="updateLength()">
<label><input type="checkbox" id="uppercase" checked> Uppercase Letters</label>
<label><input type="checkbox" id="lowercase" checked> Lowercase Letters</label>
<label><input type="checkbox" id="numbers" checked> Numbers</label>
<label><input type="checkbox" id="symbols" checked> Special Characters</label>
</div>
<button onclick="generatePassword()">Generate Password</button>
</div>
<script src="script.js"></script>
</body>
</html>CSS Styling (style.css)
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #282c36;
color: white;
}
.container {
background: #333;
padding: 20px;
border-radius: 10px;
text-align: center;
width: 300px;
}
.output {
display: flex;
align-items: center;
}
.output input {
flex: 1;
padding: 5px;
font-size: 18px;
}
button {
background: #ff9800;
border: none;
padding: 10px;
cursor: pointer;
}
button:hover {
background: #e68900;
}
.settings label {
display: block;
margin: 5px 0;
}JavaScript Logic (script.js)
const lengthInput = document.getElementById("length");
const lengthValue = document.getElementById("lengthValue");
const passwordInput = document.getElementById("password");
const uppercase = document.getElementById("uppercase");
const lowercase = document.getElementById("lowercase");
const numbers = document.getElementById("numbers");
const symbols = document.getElementById("symbols");
const upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const lowerChars = "abcdefghijklmnopqrstuvwxyz";
const numberChars = "0123456789";
const symbolChars = "!@#$%^&*()_+{}|:<>?";
function updateLength() {
lengthValue.textContent = lengthInput.value;
}
function generatePassword() {
let allChars = "";
let password = "";
if (uppercase.checked) allChars += upperChars;
if (lowercase.checked) allChars += lowerChars;
if (numbers.checked) allChars += numberChars;
if (symbols.checked) allChars += symbolChars;
if (allChars === "") {
alert("Please select at least one option");
return;
}
for (let i = 0; i < lengthInput.value; i++) {
password += allChars.charAt(Math.floor(Math.random() * allChars.length));
}
passwordInput.value = password;
}
function copyPassword() {
passwordInput.select();
document.execCommand("copy");
alert("Password copied to clipboard!");
}Additional Practical Features
Avoid Repeating Characters
Modify the password generation function to avoid repeating characters for better security.
function generatePassword() {
let allChars = "";
let passwordSet = new Set();
if (uppercase.checked) allChars += upperChars;
if (lowercase.checked) allChars += lowerChars;
if (numbers.checked) allChars += numberChars;
if (symbols.checked) allChars += symbolChars;
if (allChars === "") {
alert("Please select at least one option");
return;
}
while (passwordSet.size < lengthInput.value) {
passwordSet.add(allChars.charAt(Math.floor(Math.random() * allChars.length)));
}
passwordInput.value = Array.from(passwordSet).join('');
}Strength Indicator
Show a password strength indicator based on the selected options.
function checkStrength(password) {
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 levels = ["Weak", "Fair", "Good", "Strong"];
return levels[strength - 1];
}Call checkStrength(passwordInput.value) after generating a password to display strength.
Conclusion
This Responsive Password Generator is a simple but essential tool for generating secure passwords. By enhancing it with features like non-repeating characters and a strength indicator, we improve both security and usability.