Selector Practice: Changing Style Properties

Part 1: Modify the body element's color.

When each button below is clicked, change the body's background color to the correct color.

  1. What element or elements do you want to target? (the body)
  2. What do you want to change about each element? (the backgroundColor style property)

Part 2: Modify the corresponding section's background color.

Do the same thing as above, but target the appropriate section (instead of the body element).

  1. See if you can also make the corresponding section's font bold.
  2. See if you can create a reset button that removes all of the styles you just added.

Part 3: Consolidate makeRed, makeBlue, etc. into a single function.

Refactor your main.js code so that one function controls everything.

Red Section
Blue Section
Pink Section
Orange Section