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

We have now programmed a “show password” feature. Now we need to make a scale that will provide users with feedback about the reliability of the password that they have entered. The scale is a thin bar at the bottom of the “Password” field that should grow with each entered character. If the password is too short, the bar should be red, if it is of average length, then it should be yellow, and if it is sufficiently long, then it should be green.

The bar should increase in length with each entered character. It would be cumbersome to create a separate class for each password length. Therefore, we will change the element style using the style property. What CSS property do I need to change to make the bar longer? Since it is positioned horizontally, the width property that is responsible for the element’s width must be changed.

Initially the bar has a length of 0% and cannot be seen:

And this is how it will look if you assign it a width of 50%.

If the element width is assigned as a percentage, it is calculated relative to the width of the parent element. If the width of the parent is 200px, then the nested element with the width of 50% will have an absolute width of 100px. You can learn more about relative and absolute values in this assignment.

The bar has the security-bar class. Find it, write it to a variable, and assign it a width of 50%.