Strong Password Generator
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f7f7f7;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #333;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 400px;
text-align: center;
}
h1 {
color: #3498db;
margin-bottom: 20px;
}
.input-group {
margin-bottom: 20px;
}
label {
font-size: 16px;
color: #333;
display: block;
margin-bottom: 10px;
}
input[type="number"] {
width: 100%;
padding: 10px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 5px;
margin-top: 5px;
}
.options {
text-align: left;
margin-bottom: 20px;
}
.options label {
display: block;
margin-bottom: 5px;
font-size: 14px;
color: #555;
}
button {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #2980b9;
}
.output {
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f9f9f9;
padding: 10px;
border: 2px solid #ddd;
border-radius: 5px;
}
#passwordOutput {
width: 70%;
border: none;
font-size: 16px;
background-color: transparent;
outline: none;
}
#copyButton {
padding: 5px 10px;
background-color: #2ecc71;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
#copyButton:hover {
background-color: #27ae60;
}
@media (max-width: 600px) {
input[type="number"], #passwordOutput {
font-size: 14px;
}
button {
font-size: 14px;
}
}
// Character sets for password generation
const lowercase = 'abcdefghijklmnopqrstuvwxyz';
const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const numbers = '0123456789';
const symbols = '!@#$%^&*()_+~`|}{[]:;?><,./-=';
// Function to generate a random character from a string
function getRandomCharacter(str) {
return str[Math.floor(Math.random() * str.length)];
}
// Function to generate a strong password
function generatePassword(length, includeUppercase, includeNumbers, includeSymbols) {
let characterSet = lowercase; // Default: lowercase letters
if (includeUppercase) characterSet += uppercase;
if (includeNumbers) characterSet += numbers;
if (includeSymbols) characterSet += symbols;
let password = '';
for (let i = 0; i < length; i++) {
password += getRandomCharacter(characterSet);
}
return password;
}
// Event listener for generate button
document.getElementById('generateButton').addEventListener('click', function() {
const length = document.getElementById('passwordLength').value;
const includeUppercase = document.getElementById('includeUppercase').checked;
const includeNumbers = document.getElementById('includeNumbers').checked;
const includeSymbols = document.getElementById('includeSymbols').checked;
const password = generatePassword(length, includeUppercase, includeNumbers, includeSymbols);
document.getElementById('passwordOutput').value = password;
});
// Copy password to clipboard
document.getElementById('copyButton').addEventListener('click', function() {
const passwordOutput = document.getElementById('passwordOutput');
passwordOutput.select();
document.execCommand('copy');
alert('Password copied to clipboard!');
});
.png)
.png)
Comments
Post a Comment