Password Generator
Code
Javascript
function generatePassword() {
const length = document.getElementById("length").value;
const uppercase = document.getElementById("uppercase").checked;
const numbers = document.getElementById("numbers").checked;
const symbols = document.getElementById("symbols").checked;
let charset = "abcdefghijklmnopqrstuvwxyz";
if (uppercase) {
charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
}
if (numbers) {
charset += "0123456789";
}
if (symbols) {
charset += "!@#$%^&*()_+-={}[]|\\:;<>,.?/~";
}
let password = "";
for (let i = 0; i < length; i++) {
password += charset.charAt(Math.floor(Math.random() * charset.length));
}
document.getElementById("password").value = password;
}
function copyPassword() {
const password = document.getElementById("password");
password.select();
password.setSelectionRange(0, 99999);
document.execCommand("copy");
alert("Password copied to clipboard!");
}The generatePassword() function first retrieves the user's desired password length, as well as whether they want uppercase letters, numbers, and symbols included in the password. It then creates a character set based on the user's choices and generates a random password of the specified length using the character set. Finally, it updates the value of an HTML input element with the generated password.
The copyPassword() function selects the generated password in the HTML input element, sets the selection range to include the entire password, and then executes the "copy" command to copy the password to the clipboard. It also displays an alert to notify the user that the password has been copied.
Overall, this code provides a convenient way for users to generate and copy secure passwords with different combinations of characters.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Password Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Password Generator</h1>
<div class="form">
<label for="length">Password Length:</label>
<input type="number" id="length" min="8" max="64" value="16">
<label for="uppercase">Include Uppercase Letters:</label>
<input type="checkbox" id="uppercase">
<label for="numbers">Include Numbers:</label>
<input type="checkbox" id="numbers">
<label for="symbols">Include Symbols:</label>
<input type="checkbox" id="symbols">
<button id="generate" onclick="generatePassword()">Generate Password</button>
<input type="text" id="password" readonly>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS Code
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
}
.container {
width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
.form {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
label {
flex: 1 0 100%;
margin-bottom: 10px;
font-weight: bold;
}
input[type="number"],
input[type="checkbox"] {
flex: 0 1 auto;
margin-bottom: 10px;
margin-right: 10px;
padding: 5px;
}
button {
flex: 1 0 100%;
background-color: #007bff;
color: #fff;
border: none;
padding: 10px;
margin-top: 20px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0069d9;
}
#password {
flex: 1 0 100%;
margin-top: 20px;
padding: 10px;
font-size: 18px;
text-align: center;
border: none;
background-color: #f1f1f1;
border-radius: 5px;
}
Comments