Привет, разработчики! Сегодня в этом посте мы узнаем, как создать приложение Генератор случайных паролей на Javascript с фантастическим дизайном. Для его создания мы будем использовать простой CSS, HTML и чистый Javascript.

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

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

Демо

Приложение генератора случайных паролей на 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 используется для связи с HTML, поэтому убедитесь, что это расширение .css. Например, переключить.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 будет выполнять основную работу, он будет генерировать код при нажатии кнопки генерации. В varchars я добавил разные числа, цифры, символы и т. д. Эти символы и числа, связанные друг с другом, будут создавать случайные пароли. Math.random() поможет здесь. Пароль отобразится в поле ввода. Кнопка копирования напрямую подключена к входу. Он скопирует написанный текст в поле ввода.

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:

  1. Кнопка переключения темного режима в JavaScript
  2. Удивительная карточка еды с эффектом наведения с использованием CSS и HTML
  3. Эффект наведения курсора на иконки социальных сетей с использованием CSS

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