View Code? Open in Web Editor
NEW
This project forked from sf-wdi-44/jquery-style-switcher
Style switcher application to learn selectors, DOM manipulation, and event handling.
HTML 78.30%
JavaScript 14.82%
CSS 6.88%
jquery-style-switcher's Introduction
- 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.
- On click change the div below to a red background.
- You will want to reference the .css method.
- On click change the div below to a green background.
- You will want to reference the .css method.
- On click change the div below to a blue background.
- You will want to reference the .css method.
- On click make the div below larger and have a red background.
- You will want to reference the .addClass method
- On click make the div below smaller and have a green background.
- You will want to reference the .addClass method
- 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().
jquery-style-switcher's People
Contributors
Watchers