Html
<div class="password-generator">
<label for="password-type">Select Password Type:</label>
<select id="password-type">
<option value="weak">Weak (8 characters, letters only)</option>
<option value="medium">Medium (12 characters, letters and numbers)</option>
<option value="strong">Strong (16 characters, letters, numbers, and special characters)</option>
</select>
<button id="generate-password">Generate Password</button>
<input type="text" id="password" readonly>
<button id="copy-password">Copy Password</button>
<button id="visit-blog">Visit My Blog</button>
</div>
Css
.password-generator {
text-align: center;
margin-top: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#password-type {
width: 200px;
height: 30px;
font-size: 16px;
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
#password {
width: 200px;
height: 25px;
font-size: 16px;
text-align: center;
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
#copy-password {
padding: 5px 10px;
font-size: 16px;
cursor: pointer;
margin-right: 10px;
background-color: #4CAF50;
color: #ffffff;
border: none;
border-radius: 5px;
}
#visit-blog {
padding: 5px 10px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: #ffffff;
border: none;
border-radius: 5px;
}
button:hover {
opacity: 0.8;
}
.password-generator label {
font-weight: bold;
margin-bottom: 5px;
}
.password-generator select, input, button {
margin-bottom: 10px;
}
Js
const generatePasswordButton = document.getElementById('generate-password');
const copyPasswordButton = document.getElementById('copy-password');
const passwordInput = document.getElementById('password');
const passwordTypeSelect = document.getElementById('password-type');
const visitBlogButton = document.getElementById('visit-blog');
generatePasswordButton.addEventListener('click', () => {
const passwordType = passwordTypeSelect.value;
let characters = '';
let passwordLength = 0;
switch (passwordType) {
case 'weak':
characters = 'abcdefghijklmnopqrstuvwxyz';
passwordLength = 8;
break;
case 'medium':
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
passwordLength = 12;
break;
case 'strong':
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+';
passwordLength = 16;
break;
}
let password = '';
for (let i = 0; i < passwordLength; i++) {
password += characters.charAt(Math.floor(Math.random() * characters.length));
}
passwordInput.value = password;
});
copyPasswordButton.addEventListener('click', () => {
navigator.clipboard.writeText(passwordInput.value);
alert('Password copied to clipboard!');
});
visitBlogButton.addEventListener('click', () => {
const blogUrl = 'https://codecrafti.blogspot.com'; // Replace with your blog URL
window.open(blogUrl, '_blank');
});
0 Comments