Генератор случайных паролей с помощью Javascript

Привет, разработчики, сегодня мы узнаем, как создать генератор случайных паролей с помощью Javascript. Надеюсь, вам понравится этот пост.

Javascript Генератор случайных паролей сегодня активно используется на многих популярных и различных сайтах. Вы могли уже видеть их при создании аккаунта на какой-либо платформе. Пароль, созданный с помощью этого приложения, будет очень надежным, так как он включает в себя такие комбинации ключевых слов, как цифры, символы, заглавные и строчные буквы.

Пароль будет случайным и уникальным, поэтому его будет нелегко угадать. Здесь я использовал метод Math.floor и Math.random из JavaScript для создания приложения. Когда будет нажата кнопка generate. Различные типы циклов будут создавать разные пароли каждый раз.

Демонстрация

Генератор случайных паролей с помощью Javascript | исходный код
HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="box">
      <h2>Random Password Generater</h2>
      <input type="text" name="" placeholder="Password" id="password" readonly>

      <table>
        <th><div id="button" class="btn1"onclick="genPassword()">Generate</div></th>
        <th><a  id="button" class="btn2" onclick="copyPassword()">Copy</a></th>
      </table>
    </div>

    <script src="script.js"></script>
  </body>
</html>

Вход в полноэкранный режим Выход из полноэкранного режима

Код CSS
Добавим некоторые стили с помощью CSS.

* {
    margin: 0;
    padding: 0;
    user-select: none; /*important*/
    box-sizing: border-box;
}
body {
    background-color: #FF8C00 ;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.box{
  background-color: white;
  padding-top: 30px;
  padding: 30px;
  margin-bottom: 12em;
}
.box h2{
  margin-bottom: 40px;
  text-align: center;
  font-size: 26px;
  color: rgb(219, 99, 0);
  font-family: sans-serif;
}
input {
  padding: 20px;
    user-select: none;
    height: 50px;
    width: 400px;
    border-radius: 6px;
    border: none;
    border: 2px solid #ff9411;
    outline: none;
    font-size: 22px;
}
input::placeholder{
  font-size: 23px;
} 
#button {
    font-family: sans-serif;
    font-size: 15px;

    margin-top: 40px;
    border: 2px solid #ff9411 ;
    width: 155px;
    height: 50px;
    text-align: center;
    background-color: #eb8a13;
    display: flex;
    color: rgb(255, 255, 255);
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 7px;
}
.btn2{
   margin-left: 85px
 }
#button:hover {
    color: white;
    background-color: #db7900
}

Войти в полноэкранный режим Выход из полноэкранного режима

Код JavaScript
JavaScript будет генерировать код при нажатии на кнопку generate. В varchars я добавил различные числа, цифры, символы и т.д.

Эти символы и числа, связанные друг с другом, будут создавать случайные пароли. Здесь поможет Math.random(). Пароль будет отображаться в поле ввода. Кнопка Copy напрямую связана с кнопкой ввода. Она будет копировать написанный текст в поле ввода.

Код JavaScript

function genPassword() {
        var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var passwordLength = 12;
        var password = "";
        for (var i = 0; i <= passwordLength; i++) {
            var randomNumber = Math.floor(Math.random() * chars.length);
            password += chars.substring(randomNumber, randomNumber +1);
        }
        document.getElementById("password").value = password;
    }
    function copyPassword() {
      var copyText = document.getElementById("password");
      copyText.select();
      copyText.setSelectionRange(0, 999);
      document.execCommand("copy");
      alert("copied to clipboard")
    }

Вход в полноэкранный режим Выйти из полноэкранного режима

Поздравляем! Вы успешно создали наше приложение «Генератор случайных паролей» на Javascript.

Взгляните на другие мои замечательные учебники по CSS и Javascript:

Отзывчивый дизайн нижнего колонтитула в HTML и CSS
Кнопка переключения темного режима с помощью JavaScript
Изменение цвета фона с помощью Javascript

Мой сайт: codewithayan, посмотрите здесь все мои замечательные уроки.

Генератор случайных паролей с помощью Javascript | Исходный код

Демонстрация