Flex Panel Reflection

     The flex panel lab was about creating vertical panels, each with a different background image, that revealed a message when clicked. After setting up the HTML document, I set up 5 divs with different background-image attributes in the CSS. Within each div, I put a hidden, 3 word message between 3 <p> tags for each word, with only the middle of the 3 initially visible. Once the panels were set up, I added event listeners in the JS that would add a CSS class to the panel when clicked, .addEventListener("click", toggleOpen). This class would open the panel and reveal the full message.
     These skills are important to a web designer because they help make a web page respond to user input. Previously, we used onClick to make a function fire off after an element is clicked but the JS .addEventListener() method gives us another way to do it. It even has more events that we can fire our functions after, like mousemove, so it's more flexible to use. It essentially is an addition to our JS tool belt and gives us options on how we want to make a site interactive.