Генератор случайных паролей на 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">
#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");  
}
 
Исходный код генератора случайных чисел доступен по ссылке. Для наглядности автор записал руководство по реализации проекта: