Lab 5 - Clicking

Clicktastic

Flex

1. Make an html page with a style element in the head and a script element at the end of the body.
2. Inside the body, add 2 img elements (you can use picsum.photos to get the URLs for these images).
3. style the body to have no margin
4. style the body to have a height of 100vh
5. style the body to be a flex container
6. style the flex container such that the 2 images are centered vertically
7. style the flex container such that the 2 images are aligned to at the start, horizontally

JS

1. Add an event listener such that when the body of the page is clicked, a new image is added to the page
2. Update the event listener such that in addition to the above, clicking the image toggles the direction of the flex container from horizontal to vertical