Мяу! У меня есть гипотеза: если сделать удобную форму регистрации, посетители будут регистрироваться чаще. Надо проверить.

Кекс подкинул новую задачу. Нужно доработать страницу регистрации на новостном сайте. На странице есть поля для ввода логина и пароля, а также кнопка «Зарегистрироваться». Кекс хочет, чтобы пользователи могли по желанию увидеть пароль, который вводят. Также нужно запрограммировать шкалу сложности пароля, которая будет напоминать пользователям, что лучше придумать пароль подлиннее.

Начнём с показа пароля. Для ввода пароля используется специальное поле с типом password:

<input class="password" type="password" required>

Особенность этого поля в том, что введённый текст в нём маскируется. Обычно браузеры используют для этого звёздочки или кружочки. Подробнее о типах полей вы можете узнать из этой части.

Пароль маскируют, чтобы никто не мог его подсмотреть. Но набирать его при этом становится сложнее — можно ошибиться и не заметить. Если пользователь уверен, что за ним не подглядывают, и хочет убедиться, что не опечатался, то нужно дать ему возможность увидеть пароль.

Чтобы показать пароль, поле ввода пароля превращают в текстовое поле ввода. Для этого его тип изменяют на text. За тип в JavaScript отвечает свойство type. Чтобы изменить тип поля ввода, нужно записать в свойство type новое значение:

let input = document.querySelector('input');

// Сделаем input текстовым полем ввода
input.type = 'text';

Поле для ввода пароля имеет класс password. Найдём его, запишем в переменную и сделаем обычным текстовым полем.