Roselou / jQuery-Style-Switcher

Style switcher application to learn selectors, DOM manipulation, and event handling.

Style Switcher

• In this exercise you will use jQuery to change the styling and behavior of a number of divs on the page.
• Your job is to use the attached starter code with jQuery to activate the below functionality.

Change Red:

• On click change the div below to a red background.
• You will want to reference the .css method.

Change Green:

• On click change the div below to a green background.
• You will want to reference the .css method.

Change Blue:

• On click change the div below to a blue background.
• You will want to reference the .css method.

Make Big:

• On click make the div below larger and have a red background.
• You will want to reference the .addClass method

Make Small:

• On click make the div below smaller and have a green background.
• You will want to reference the .addClass method

Animate Div:

• On click perform an animation of your choice on the below div using CSS3.
• You will want to reference CSS3 transitions and transforms.

Bonus (Advanced) Create Full Screen Overlay:

• On click create a full screen overlay div that covers the entire screen with a transparent black color.
• On click of the overlay div, hide the overlay.
• You may want to reference jQuery .hide() and .show().