ayalavirtual / codingchallenge

Coding Challenge

Try your hand at re-creating the layout in the picture provided. The main layout will be created using HTML, CSS and/or Bootstrap. Functionality should be added using Javascript and/or jQuery. (jQuery is optional)

Functionality Instructions:

• “Change Box 1” button should change the color and border of box 1 when clicked

• “Change Box 2” button should change the color and border of box 2 when clicked

• “Change Box 3” button should change the color and border of box 3 when clicked

• “Change All” button should change the color and border of all boxes when clicked

• “Hide Box 1” button should hide box 1, but still have space for box 1 when clicked

• “Hide Box 2” button should hide box 2, but still have space for box 2 when clicked

• “Hide Box 3” button should hide box 3, but still have space for box 3 when clicked

• “Hide All” button should hide all boxes, but still have room for the row when clicked

• “Reset Colors” button should reset the colors of each box to reflect the original colors in the image when clicked

• “Show All” button should show all boxes in their original locations according to the image