[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: THAT’S 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