Продвижение в интернете |
Апр 22, 2024

Генератор паролей на JavaScript

Доброго времени суток! Сегодня мы с Вами создадим простой генератор паролей на JavaScript. Пароли, которые будут создаваться данным генератором подойдут в качестве хороших паролей для регистрации на различных сервисах.

Итак, рассмотрим код:


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Генератор Паролей</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
  <h1 class="mb-4">Генератор Паролей</h1>
  <div class="form-group">
    <label for="length">Длина пароля:</label>
    <input type="number" class="form-control" id="length" value="12" min="6" max="50">
  </div>
  <div class="form-group">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="lowercase" checked>
      <label class="form-check-label" for="lowercase">Включить строчные буквы</label>
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="uppercase" checked>
      <label class="form-check-label" for="uppercase">Включить заглавные буквы</label>
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="numbers" checked>
      <label class="form-check-label" for="numbers">Включить цифры</label>
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="symbols" checked>
      <label class="form-check-label" for="symbols">Включить символы</label>
    </div>
  </div>
  <button type="button" class="btn btn-primary mr-2" onclick="displayGeneratedPassword()">Сгенерировать Пароль</button>
  <button type="button" class="btn btn-secondary" onclick="copyToClipboard()">Скопировать в буфер обмена</button>
  <p class="mt-3" id="password"></p>
</div>

<script>
function generatePassword(length, lowercase, uppercase, numbers, symbols) {
  const charset = [];
  if (lowercase) charset.push("abcdefghijklmnopqrstuvwxyz");
  if (uppercase) charset.push("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
  if (numbers) charset.push("0123456789");
  if (symbols) charset.push("!@#$%^&*()-_=+");

  const charsetString = charset.join('');

  let password = "";
  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * charsetString.length);
    password += charsetString[randomIndex];
  }
  return password;
}

function displayGeneratedPassword() {
  const length = parseInt(document.getElementById("length").value);
  const lowercase = document.getElementById("lowercase").checked;
  const uppercase = document.getElementById("uppercase").checked;
  const numbers = document.getElementById("numbers").checked;
  const symbols = document.getElementById("symbols").checked;

  const password = generatePassword(length, lowercase, uppercase, numbers, symbols);
  const passwordField = document.getElementById("password");
  passwordField.textContent = password;
  passwordField.style.color = "#000"; // пароль должен быть виден на фоне страницы
}

function copyToClipboard() {
  const passwordField = document.getElementById("password");
  const passwordText = passwordField.textContent;

  // Создаем временный элемент ввода
  const tempInput = document.createElement("input");
  tempInput.value = passwordText;
  document.body.appendChild(tempInput);

  // Выбираем весть текст в этом элементе
  tempInput.select();
  tempInput.setSelectionRange(0, 99999); // Для мобильных устройств

  // Копируем текст в буфер обмена
  document.execCommand("copy");

  // Удаляем временный элемент ввода
  document.body.removeChild(tempInput);

  alert("Пароль скопирован в буфер обмена!");
}
</script>

</body>
</html>

Вот такой генератор паролей мы с Вами рассмотрели в данной статье. А для тех, кто заинтересовался возможностями языка JavaScript, у меня есть отличный видеокурс «Программирование на JavaScript с Нуля до Гуру 2.0», который научит Вас программировать на одном из самых востребованных языков программирования в мире — языке JavaScript.

Источник