Генератор случайных паролей на JavaScript

Разработчик под ником Foolish Developer опубликовал пошаговое руководство по созданию генератора надежных и уникальных паролей с помощью JavaScript, HTML и CSS. Пароли генерируются на основе специальных символов, букв и цифр.

Структура генератора 

Ниже представлен итоговый вид генератора. Он состоит из фона, маленькой рамки с текстом, поля, а также кнопок для создания и копирования пароля. 

Вид генератора случайных паролей

Шаг 1: создание поля с помощью HTML- и CSS-кода

Код ниже создает на веб-странице поле. Автор задал фиолетовый цвет фона веб-страницы, а цветом фона рамки указал белый. 

<div class="box">

</div>

* {
 margin: 0;
 padding: 0;
 user-select: none;
 box-sizing: border-box;
  }

body {
  background-color: #8d0cf7;
  justify-content: center;
  align-items: center;
  display: flex;
  min-height: 100vh;
    }

 .box{
   background-color: white;
   padding-top: 30px;
   padding: 30px;

 }

Шаг 2: добавление заголовка в рамке 

Заголовок создается следующим кодом: 

<h2>Random Password Generater</h2>

.box h2{
  margin-bottom: 40px;
  text-align: center;
  font-size: 26px;
  color: #015a96;
  font-family: sans-serif;
} 

Шаг 3: создание поля для генерации кода 

В созданном поле, размером 40х500px, будут отображаться сгенерированные пароли. С помощью user-select: none автор ограничил пользователям действия с полем.

<input type="text" name="" placeholder="Create password" id="password" readonly>

input {
 padding: 20px;
 user-select: none;
 height: 50px;
 width: 400px;
 border-radius: 6px;
 border: none;
 border: 2px solid #8d0cf7;
 outline: none;
 font-size: 22px;
 }

input::placeholder{
  font-size: 23px;
 }

Шаг 4: создание кнопок для генерации и копирования пароля 

Автор создал кнопки с помощью кода CSS, размер каждой — 50x155px. 

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

#button {
  font-family: sans-serif;
  font-size: 15px;
  margin-top: 40px;
  border: 2px solid #7100cf;
  width: 155px;
  height: 50px;
  text-align: center;
  background-color: #7100cf;
  display: flex;
  color: rgb(255, 255, 255);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 5px;  
}

 .btn2{
   margin-left: 85px
 }

#button:hover {
  color: white;
  background-color: black;
}

Шаг 5: активация кнопки генерации кода с помощью JavaScript

Для начала нужно установить переменную ID входа (password).

var password=document.getElementById("password");

Затем добавить все символы, числа и алфавиты в var, которые будут использоваться для создания случайных паролей. 

С помощью var passwordLength указывается количество символов в будущем пароле.

var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var passwordLength = 12;
var password = "";

Пароли будут генерироваться с помощью цикла и метода Math.random ().

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;

Шаг 6: Активация кнопки копирования пароля 

С помощью кода ниже все, что написано в поле ввода, можно будет скопировать запрограммированной кнопкой.

function copyPassword() {
  var copyText = document.getElementById("password");
  copyText.select();
  document.execCommand("copy");  
}

Шаг 7: Окончательный JavaScript-код

var password=document.getElementById("password");

 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();
  document.execCommand("copy");  
}

Исходный код генератора случайных чисел доступен по ссылке. Для наглядности автор записал руководство по реализации проекта: