Interactive online courses HTML Academy
2026-03-09 12:24 Diff
https://htmlacademy.org/courses/javascript-basics/dynamic-element-styles/bar-password-length

We found the bar that shows password strength and assigned a fixed length to it. But we need the bar length to change together with the length of the entered password.

The length of the entered value is stored in its length property. We worked with this property in one of the previous chapters.

let input = document.querySelector('input'); console.log(input.value); // Outputs: Muffin console.log(input.value.length); // Outputs: 4

With each entered character, the bar should increase by 10% of the length of the parent.

Password lengthBar length110%220%330%

It turns out that in order to obtain the length of the bar, we need to multiply the password length by 10. Multiplication is indicated using an asterisk in JavaScript:

console.log(3 * 10); // Outputs: 30

Use multiplication to set the bar length. And do not forget to add the units of measurement (percentages) using concatenation:

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

Imagine that a user entered a password that was 4 characters long:

securityBar.style.width = 4 * 10 + '%'; // Result: '40%'

In order for the length of the bar to change at the same time as the password length, we must obtain the length every time that the input field is changed. Use the oninput event handler to do this. Add it to the password input field and connect the bar length and the length of the entered value. Then make sure that the bar increases in size in tandem with the password length.

What happens if the bar length is greater than 100%? Everything depends on what value is specified in the overflow CSS property of the parent element. We used the hidden value, meaning that the “extra” part of the bar is simply not displayed.