Chapter 4: Dynamic element styles

15 tasks, 1 challenge, 1 summary

Let’s learn how to change element styles by using the style property and data from the input fields. Let’s program the font color and size on the page and add a complexity scale for the password and the ability to view the password.

1. The style property Task

2. Setting the font color Task

3. Obtaining the value from the field with the slider Task

4. Setting the font size Task

5. Comparing onchange and oninput Task

6. Configuring the background color Task

7. The type property Task

8. Using the checkbox to show the password Task

9. The checked property Task

10. Changing the bar length Task

11. Tying the bar length to the password length Task

12. Saving the password length as a variable Task

13. Comparison operators Task

14. The else if statement Task

15. Finishing the signup page Task

16. Summary of “Dynamic element styles” Summary

17. Test: Pixel art Challenge