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

Создадим генератор паролей на JavaScript. Пользователь может нажать кнопку «Сгенерировать пароль», чтобы сгенерировать случайный пароль, который появится в поле ввода пароля. Поле ввода пароля отключено до тех пор, пока пароль не будет сгенерирован. Затем пользователь может нажать кнопку «Копировать», чтобы скопировать пароль в свой буфер обмена.

Пример, который мы сделаем:

HTML:

<div class="container container--column-center">
  <input
    type="text"
    id="password-input"
    value="Ваш пароль появится здесь"
    disabled
  />
  <button id="generate-button">Сгенерировать пароль</button>
  <button id="copy-button" disabled>Скопировать</button>
</div>

CSS:

.container {
  width: 100%;
  padding: 20px;
}

.container--column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#password-input {
  width: 100%;
  max-width: 300px;
  font-size: 18px;
  margin-bottom: 20px;
  padding: 10px;
}

#generate-button {
  font-size: 18px;
  background-color: lightblue;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 10px;
  padding: 10px;
}

#copy-button {
  font-size: 18px;
  background-color: lightgreen;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  padding: 10px;
}

JavaScript:

const generateButton = document.querySelector("#generate-button");
const copyButton = document.querySelector("#copy-button");
const passwordInput = document.querySelector("#password-input");

// Функция для генерации случайного пароля
const generatePassword = () => {
  // Массив символов для включения в пароль
  const characters =
    "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*";

  let password = "";

  // Цикл для выбора случайных символов и добавления их в пароль
  // 12 - это количество символов в пароле
  for (let i = 0; i < 12; i++) {
    password += characters.charAt(
      Math.floor(Math.random() * characters.length)
    );
  }

  return password;
};

// Прослушиватель событий для кнопки создания пароля
generateButton.addEventListener("click", () => {
  passwordInput.value = generatePassword();
  passwordInput.disabled = false;
  copyButton.disabled = false;
});

// Прослушиватель событий для кнопки копирования
copyButton.addEventListener("click", () => {
  passwordInput.select();
  document.execCommand("copy");
});