[Solved] SOLVED:SHOW AN ALERT AS SOON AS THE DOCUMENT IS READY

// 1: SHOW AN ALERT AS SOON AS THE DOCUMENT IS READY// 2: COMMENT OUT #1. USE THE DOCUMENT.READY SHORTHAND TO ADD TEXT INTO THE H1 ELEMENT

// 3: SELECT ALL OF THE ELEMENTS WITH THE CLASS OF red AND APPLY THE bigsize CLASS TO THEM// 4: SELECT THE ELEMENT WITH THE ID OF blue2 AND APPLY THE smallsize CLASS TO IT

// 5: SWITCH OFF THE bigsize CLASS FOR ALL OF THE ELEMENTS THAT HAVE IT// 6: SELECT ALL OF THE ELEMENTS THAT HAVE THE CLASS normalsize AND APPLY THE smallsize CLASS TO THE FIRST AND LAST

// 7: SHOW AN ALERT WHEN AN ELEMENT WITH CLASS trench IS CLICKED// 8: WHEN A USER CLICKS THE LINK WITH THE ID outerwear_man, HIDE THE ELEMENTS WITH CLASS woman

// 9: THATS KIND OF ABRUPT. INSTEAD, UPDATE #8 SO THAT THE ELEMENTS WITH CLASS woman FADE OUT IN 5 SECONDS (500 milliseconds)

// 10: WHEN A USER CLICKS THE LINK WITH THE ID outerwear_woman, SLIDE UP THE ELEMENTS WITH THE CLASS man

// 11: UPDATE #9 & #10 SO THAT WHEN MEN ARE HIDDEN, WOMEN ARE SHOWN AND WHEN WOMEN ARE HIDDEN, MEN ARE SHOWN

// 12: ADD A CLICK EVENT TO THE ELEMENT WITH THE ID OF outerwear_all SO THAT ALL OF THE ELEMENTS WITH CLASS outerwear ARE DISPLAYED

// 13: UNCOMMENT THE COMMENTED BIT OF CSS. ADD A HOVER EVENT TO EACH ELEMENT WITH THE outerwear CLASS THAT SHOWS THE NEXT em ELEMENT

// 14: COMMENT OUT THE JQUERY IN #13. ADD A HOVER EVENT TO EACH ELEMENT WITH THE outerwear CLASS THAT ANIMATES THE NEXT em ELEMENT (INSTEAD OF JUST SHOWING AND HIDING)

// 15: ADD A CLICK EVENT TO THE ELEMENT WITH ID OF outerwear_jacket THAT HIDES OTHER COAT TYPES (trench, bomber)

// CHECK EACH ELEMENT WITH CLASS outerwear. IF IT DOES NOT CONTAIN THE jacket CLASS, HIDE THE ELEMENT