- Теория
- Теория
Изменяем ширину полоски
Мы запрограммировали функцию «показать пароль». Теперь нам нужно сделать шкалу, которая покажет, насколько надёжен придуманный пользователем пароль. Шкала — это тонкая полоска в нижней части поля «Пароль», которая должна расти с каждым введённым символом. Если пароль слишком короткий, полоска должна быть красной, если пароль средней длины — жёлтой, а если пароль достаточно длинный — зелёной.
Полоска должна увеличиваться с каждым введённым символом. Создавать отдельный класс для каждой длины пароля было бы неудобно, поэтому мы будем изменять стиль элемента с помощью свойства style
. Какое CSS-свойство нужно изменить, чтобы сделать полоску длиннее? Так как она располагается горизонтально, то менять надо свойство width
, отвечающее за ширину элемента.
Изначально полоска имеет ширину 0% и не видна:
А вот так она будет выглядеть, если задать ей ширину 50%:
Если ширина элемента задана в процентах, она рассчитывается относительно ширины родительского элемента. Если ширина родителя 200px, то вложенный элемент с шириной 50% будет иметь абсолютную ширину 100px. Подробнее об относительных и абсолютных значениях вы можете узнать в этом задании.
Полоска имеет класс security-bar
. Найдём её, запишем в переменную и зададим ей ширину 50%.
Без JavaScript будущему разработчику никуда. Записывайтесь на профессиональный курс по JavaScript первого уровня.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.