Мы запрограммировали функцию «показать пароль». Теперь нам нужно сделать шкалу, которая покажет, насколько надёжен придуманный пользователем пароль. Шкала — это тонкая полоска в нижней части поля «Пароль», которая должна расти с каждым введённым символом. Если пароль слишком короткий, полоска должна быть красной, если пароль средней длины — жёлтой, а если пароль достаточно длинный — зелёной.

Полоска должна увеличиваться с каждым введённым символом. Создавать отдельный класс для каждой длины пароля было бы неудобно, поэтому мы будем изменять стиль элемента с помощью свойства style. Какое CSS-свойство нужно изменить, чтобы сделать полоску длиннее? Так как она располагается горизонтально, то менять надо свойство width, отвечающее за ширину элемента.

Изначально полоска имеет ширину 0% и не видна:

А вот так она будет выглядеть, если задать ей ширину 50%:

Если ширина элемента задана в процентах, она рассчитывается относительно ширины родительского элемента. Если ширина родителя 200px, то вложенный элемент с шириной 50% будет иметь абсолютную ширину 100px. Подробнее об относительных и абсолютных значениях вы можете узнать в этом задании.

Полоска имеет класс security-bar. Найдём её, запишем в переменную и зададим ей ширину 50%.