Password Generator using HTML CSS and JavaScript
Password generator can be use at many places where we want to our customers to keep secure password.
Hence sometimes it is difficult to guess the right password to keep.
This password generator removes your worries about thinking the right password and helps you create one.
We have use HTML, CSS and JavaScript to create this password generator too.
Please find the codes below.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generate Password</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Password Generate</h1>
<div class="output">
<input type="text" id="password" readonly placeholder="Your Secure Password">
<button id="copy-btn">Copy</button>
</div>
<div class="options">
<label>
<input type="checkbox" id="uppercase" checked>
Include Uppercase
</label>
<label>
<input type="checkbox" id="lowercase" checked>
Include Lowercase
</label>
<label>
<input type="checkbox" id="numbers" checked>
Include Numbers
</label>
<label>
<input type="checkbox" id="symbols" checked>
Include Symbols
</label>
<label>
Length
<input type="number" id="length" min="4" max="20" checked>
</label>
</div>
<button id="generate-btn">Generate Password</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
body {
font-family: "Share Tech Mono", monospace;
background: url("https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
background-size: cover;
color: green;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(255, 255, 255, 0.75);
border-radius: 10px;
border: 1px solid rgba(209, 213, 219, 0.3);
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
max-width: 400px;
width: 100%;
}
h1 {
margin-bottom: 20px;
}
.output {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
#password {
flex: 1;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
#copy-btn {
padding: 10px;
margin-left: 10px;
background-image: linear-gradient(135deg, #1f4b03 10%, #32f506 100%);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#copy-btn:hover {
background-image: linear-gradient(135deg, #1f4b03 10%, #32f506 80%);
}
.options {
text-align: left;
margin-bottom: 20px;
}
label {
display: block;
margin: 10px 0;
}
input[type="number"] {
width: 50px;
border-radius: 3px;
}
button {
padding: 10px 20px;
width: 100%;
background-image: linear-gradient(135deg, #1f4b03 10%, #32f506 100%);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: 0.5s;
}
button:hover {
background-image: linear-gradient(135deg, #1f4b03 10%, #32f506 80%);
scale: 1.05;
}
JavaScript
// Selecting Elements
const passwordField = document.getElementById("password");
const copyButton = document.getElementById("copy-btn");
const generateButton = document.getElementById("generate-btn");
const uppercaseCheckbox = document.getElementById("uppercase");
const lowercaseCheckbox = document.getElementById("lowercase");
const numbersCheckbox = document.getElementById("numbers");
const symbolsCheckbox = document.getElementById("symbols");
const lengthInput = document.getElementById("length");
// Store characters to be used in variables
const uppercaseChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const lowercaseChars = "abcdefghijklmnopqrstuvwxyz";
const numberChars = "0123456789";
const symbolChars = "!@#$%^&*()_+[]{}|;:,.<>?/";
// Function to generate a password
function generatePassword() {
// Convert the lenght Input to Integer
const lenght = parseInt(lengthInput.value);
// Declare a character pool our of selected characters type
let charPool = "";
// Check which type of characters will be added to character pool
if (uppercaseCheckbox.checked) charPool += uppercaseChars;
if (lowercaseCheckbox.checked) charPool += lowercaseChars;
if (numbersCheckbox.checked) charPool += numberChars;
if (symbolsCheckbox.checked) charPool += symbolChars;
// Check if we have at least 1 type of character selected
if (charPool === "") {
alert("Please select at least one character type!");
return;
}
// Declare password variable
let password = "";
// Loop to generate a password out of charPool
for (let i = 0; i < lenght; i++) {
const randomIndex = Math.floor(Math.random() * charPool.length);
password += charPool[randomIndex];
}
// Update password field with generated password
passwordField.value = password;
}
// Copy to Clip board function
function copyToClipboard() {
if(passwordField.value) {
passwordField.select();
document.execCommand("copy");
alert("Password copied to clipboard");
} else {
alert("Nothing to copy!");
}
}
// Event listners on generate password and copy to clipboard buttons
generateButton.addEventListener("click", generatePassword);
copyButton.addEventListener("click", copyToClipboard);
