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

Длина введённого значения хранится в его свойстве length. Мы работали с этим свойством в одной из прошлых частей.

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

console.log(input.value); // Выведет: Кекс
console.log(input.value.length); // Выведет: 4

С каждым введённым символом полоска должна увеличиваться на 10% от ширины родителя.

Выходит, чтобы получить ширину полоски, нам нужно умножить длину пароля на число 10. Умножение в JavaScript обозначается звёздочкой:

console.log(3 * 10); // Выведет: 30

Используем умножение, чтобы задать полоске ширину. И не забудем добавить с помощью конкатенации единицы измерения — проценты:

securityBar.style.width = password.value.length * 10 + '%';

Представим, что пользователь ввёл пароль длиной 4 символа:

securityBar.style.width = 4 * 10 + '%'; // Результат: '40%'

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