<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>

.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;
}

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');
});