DOM Manipulation

Styling from Values

Styling from Values

JavaScript often receives a number, while CSS needs a formatted value. A progress value such as 72 needs to become 72% before assigning it to a width.

The visible style and text should tell the same truth. If the bar width and label are updated from different assumptions, the UI becomes hard to trust.

Your task: Use the provided completion value to set the progress bar width and update the progress label.

Free with a JS Exercises account

Sign in to start coding, run your solution, and keep your progress saved for later. No payment needed.

By continuing, you agree to our Terms and Privacy Policy. We'll send occasional product updates and news. You can unsubscribe anytime.

Styling from Values

JavaScript often receives a number, while CSS needs a formatted value. A progress value such as 72 needs to become 72% before assigning it to a width.

The visible style and text should tell the same truth. If the bar width and label are updated from different assumptions, the UI becomes hard to trust.

Your task: Use the provided completion value to set the progress bar width and update the progress label.

Free with a JS Exercises account

Sign in to start coding, run your solution, and keep your progress saved for later. No payment needed.

By continuing, you agree to our Terms and Privacy Policy. We'll send occasional product updates and news. You can unsubscribe anytime.

Console

Run code to see output.