Приложение для создания случайных паролей | Random Password Generator App in HTML CSS & JavaScript

Сегодня в этом блоге вы узнаете, как создать приложение-генератор случайных паролей с использованием HTML CSS и JavaScript. Генератор случайных паролей — это программа, которая автоматически генерирует случайный пароль. Эти сгенерированные пароли смешиваются с цифрами, алфавитами и знаками препинания. Этот тип программы помогает пользователю создать надежный пароль.

Сегодня в этой программе я поделюсь с вами этой программой (Генератор случайных паролей). В этой программе есть контейнер с полем ввода, иконкой копирования и кнопкой. Когда вы нажимаете кнопку «Создать пароль», каждый раз, когда эта программа автоматически генерирует случайный пароль, отображается кнопка «Копировать», которая копирует сгенерированный пароль при нажатии на эту кнопку.

Эта программа генерирует случайный пароль с помощью случайной функции JavaScript Math.random(). Без JavaScript эта программа не сгенерирует случайный пароль. И в этом видео, вы также видели, кнопка копирования, которая копирует сгенерированный пароль. Это возможно с помощью JavaScript document.execCommand («копировать»).

Если вам нравится эта программа (генератор случайных паролей) и вы хотите получить исходные коды. Вы можете легко получить исходные коды этой программы. Чтобы получить исходные коды, вам просто нужно прокрутить вниз.

Приложение для создания случайных паролей [Исходные коды]

Для создания этой программы (Генератор случайных паролей). Во-первых, вам нужно создать два файла: один файл HTML, а другой — файл CSS. После создания этих файлов просто вставьте следующие коды в свой файл. 

HTML КОД:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>

<div class="container">
         <div class="text">Random Password Generator <br>in HTML CSS & JavaScript</div>
         <div class="input-data">
            <div class="display">
               <input type="text">
               <span class="far fa-copy" onclick="copy()"></span>
               <span class="fas fa-copy" onclick="copy()"></span>
            </div>
            <button>Generate Password</button>
         </div>
      </div>

CSS КОД:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #000;
  text-align: center;
}
.container{
  width: 450px;
  background: #111;
  border: 1px solid #444;
  border-radius: 5px;
  padding: 20px 25px;
}
.container .text{
  color: #ccc;
  font-weight: 600;
  font-size: 26px;
  line-height: 35px;
}
.container .input-data{
  margin: 20px 5px 15px 5px;
}
.input-data .display{
  height: 45px;
  width: 100%;
  display: flex;
  position: relative;
}
.input-data .display input{
  height: 100%;
  width: 100%;
  outline: none;
  color: #eee;
  border: 1px solid #333;
  background: #222;
  padding: 10px;
  font-size: 17px;
  pointer-events: none;
  user-select: none;
}
.input-data .display span{
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 25px;
  color: grey;
  z-index: 999;
  display: none;
  cursor: pointer;
}
.input-data button{
  display: block;
  height: 45px;
  width: 100%;
  margin-top: 15px;
  border: 1px solid #444;
  outline: none;
  background: #1b1b1b;
  color: #999;
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.input-data button:hover{
  background: #222;
}

JAVASCRIPT КОД:

<script>
         const display = document.querySelector("input"),
         button = document.querySelector("button"),
         copyBtn = document.querySelector("span.far"),
         copyActive = document.querySelector("span.fas");
         let chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+~`|}{[]:;?><,./-=";
         button.onclick = ()=>{
           let i,
           randomPassword = "";
           copyBtn.style.display = "block";
           copyActive.style.display = "none";
           for (i = 0; i < 16; i++) {
             randomPassword = randomPassword + chars.charAt(
               Math.floor(Math.random() * chars.length)
             );
           }
           display.value = randomPassword;
         }
         function copy(){
           copyBtn.style.display = "none";
           copyActive.style.display = "block";
           display.select();
           document.execCommand("copy");
         }

</script>

Вот и все, теперь вы успешно создали приложение генератора случайных паролей в HTML CSS и JavaScript. Если ваш код не работает или вы столкнулись с какой-либо ошибкой/проблемой, прокомментируйте или свяжитесь с нами со страницы контактов.