Предисловие
Не знаю, можно ли размешать на данном сервисе очень простые проекты. Но не попробовав не узнаю. В данной статье я представлю вам сайт, позволяющий генерировать простейшие логины и пароли. И ниже представлю весь его исходный код и ссылки!
Сайт
Более 2 недель назад я написал и выложил в открытий доступ свой простейший мини сайт, который генерирует примитивные логины и пароли. На все это ушло порядка 100 строк кода на языке JavaScript. Скриншот этого сайта вы можете рассмотреть ниже.
Согласен с тем, о чем вы сейчас могли подумать. Мой сайт не выделяется своей особой красотой (; Но это всего лишь его первый облик, который никоем образом не делает его хуже или неудобнее. Просто я не ставил первостепенной целью понравиться пользователю, для меня более важно удобство использования моего сайта, а не его красота.
На сайте нас встречают два поля, где первый выводит логин, а второй пароль, а так же кнопки, которые занимаются генерацией и копированием их. За эти две задачи отвечают два отдельных файла JavaScript. Первая как раз и занимается генерацией логина и пароля. А второй копирует их в буфер, чтобы вы могли сразу их использовать, без нужды их выделять и копировать. Все действия происходят на стороне клиента.
Давайте взглянем под капот моего сайта. Начнем с первого файла, его я назвал generate.js. Ко всему коду я прикрепил множество комментариев, так что не думаю нужным говорить отдельно о каждом из них (;
'Use strict'
// Функция для генерации символов
// Параметр keys получает рандомное число от 0 до 9 и использует его как ключ для получения какого-либо значения из списка symbol
function generate_symbol(keys)
{
// Коллеция symbol содержащая в себе разнообразные символы
let symbol = new Map([
[0, '-'],
[1, '!'],
[2, '@'],
[3, '#'],
[4, '$'],
[5, '%'],
[6, '^'],
[7, '&'],
[8, '&'],
[9, '*']
])
// Метод get считает значения по полученному выше рандомному ключу и возврощает его
return symbol.get(keys)
}
// Функция для генерации цифр
// Параметр max отвечает за количество цифр
function generate_number(max)
{
let final_number = ''
// Цикл с полученной переменной max
for (var i = 0; i < max; i++)
{
// random выдает дробное рандомное число
// 10 это умножение дробного результата random на число 10, чтобы получилось дробное число с целым от 0 до 9
// floor округлит дробное число к целому в меньшую степень
let number = Math.floor(Math.random() * 10)
// Присвоим полученное число из выражения выше финальному паролю
final_number += number
// Присвоим финальному паролю рандомный символ
final_number += generate_symbol(number)
}
return final_number // Вернем готовый финальный пароль длинною 20 символов
}
// Функция, которая занимается генерацией комбинаций слов и местоимений
function generator_words()
{
let words_human_arr = ['person', 'man', 'woman', 'child', 'boy', 'girl', 'friend', 'neighbour', 'name', 'surname', 'maiden', 'address', 'single', 'age', 'old', 'man', 'young'] // Массив слов связанных с человеком
let pronouns_human_arr = ['i', 'you', 'we', 'they', 'he', 'she', 'it', 'my', 'me', 'your', 'our', 'us', 'their', 'them', 'his', 'him', 'her', 'its'] // Массив местоимений связанных с человеком
// Переменаая, в которую запишется фиинальная комбинация слов и местоимений
let final_words = ''
// random выдает дробное рандомное число
// 4 это умножение дробного результата random на число 4, чтобы получилось дробное число с целым от 0 до 3
// floor округлит дробное число к целому в меньшую степень, а единица увеличит число на единицу чтобы цикл выполнился хотя бы один раз
// Переменная amount хранит исход работы, которая описана в этом блоке комментариев, чтобы использовать его в цикле ниже
let amount = Math.floor(Math.random() * 4) + 1
// Цикл объединяет комбинацию слово и местоимение при каждой итерации
for (let i = 0; i <= amount; i++)
{
// Думаю не стоит объяснять как работает random, ведь есть описание работы и пример выше.
let words_human_arr_length = words_human_arr.length // Получаем количество элементов в массиве и записываем в переменную
let num1 = Math.floor(Math.random() * words_human_arr_length) // Тут итог работы random умножается на переменную words_human_arr_length и записывается в переменную num1
let word_human = words_human_arr[num1] // Выбираем рандомное слово из массива использую переменную num1
// То же самое и с местоимением
let pronouns_human_arr_length = pronouns_human_arr.length
let num2 = Math.floor(Math.random() * pronouns_human_arr_length)
let pronoun_human = pronouns_human_arr[num2]
// Записываем итог работы итерации в переменную при каждой итерации цикла
final_words += word_human + '_' + pronoun_human
if (amount > 1)
final_words += '_'
}
return final_words
}
function genetate_password()
{
let final_password = ''
final_password += generate_number(10) // Передали функции аргументом количество цифр у сгенирированного числа
return final_password
}
function genetate_login()
{
let final_login = ''
final_login = generator_words()
return final_login
}
// Главная функция привязанная к кнопке Generate
function generate_login_and_password()
{
// Получением элемента с id login
let final_login = document.getElementById('login')
// Присваение этому элементу новое значение, которые мы получили при работе всего кода
final_login.value = genetate_login()
// Получением элемента с id password
let final_password = document.getElementById('password')
// Присваение этому элементу новое значение, которые мы получили при работе всего кода
final_password.value = genetate_password()
}Второй файл занимается копированием в буфер обмена готового логина и пароля, его же я назвал copy.js. Символично)
'Use strict'
// Функция для копирования логина в буфер обмена при клики кнопки скопировать логин
function copy_login() {
// Получением элемента с id login
let final_login = document.getElementById('login')
// Выбираем текстовое поле
final_login.select();
// Копируем текст внутри текстового поля
document.execCommand("copy");
}
// Функция для копирования пароля в буфер обмена при клики кнопки скопировать пароль
function copy_password() {
// Получением элемента с id password
let final_password = document.getElementById('password')
// Выбираем текстовое поле
final_password.select();
// Копируем текст внутри текстового поля
document.execCommand("copy");
}
// Функция для копирования логина и пароля в буфер обмена при клики кнопки скопировать все
function copy_all(){
// Получением элемента с id login
let final_login = document.getElementById('login')
// Получением элемента с id password
let final_password = document.getElementById('password')
// Объявляю переменную ca и записываю в нее значение final_login и final_password
// Так же устанавливаю между ними символ новой строки, чтобы расположить их отдельно.
// Так же присваиваю текст Login и Password, чтобы пользователь мог отличить логин и пароль
let ca = 'Login: ' + final_login.value + ' ' + 'Password: ' + final_password.value // Там где ' ' лучше было бы поставить символ \n, но я таки не смог скопировать его в буфер обмена
// Создаю временный элемент input и присваиваю его переменноой temporary_element_input
let temporary_element_input = document.createElement("input")
// Метод appendChild позволяет вставить в конец одного элемента другой элемент
// Чаще всего используется после создания элемента с помощью createElement
document.body.appendChild(temporary_element_input)
// Изменяю значение недавно созданного элемента input на значение переменной ca
temporary_element_input.setAttribute('value', ca)
// Выбираем текстовое поле
temporary_element_input.select()
// Копируем текст внутри текстового поля
document.execCommand("copy")
// Метод removeChild позволяет удалить элемент из другого элемента
document.body.removeChild(temporary_element_input)
}Сайт оптимизирован под мобильные устройства, так что все должно работать и на мобильных устройствах (извините за тавтологию). Если есть проблемы, пишите о них в комментариях. А на этом моменте можно уже заканчивать статью, не забудь заглянуть на мой сайт, все ссылки прикрепил ниже! Так же предлагайте что изменить мне на сайте, что добавить, а что убрать. Ну и пишете свое мнение, я обязательно прочту их (;