JavaScript30 - 5 Flex Panels Image Gallery

Well here we are! Back with another update on my progress through Wes Bos's JavaScript 30. In this challenge I had to take 5 pre-selected images with some "motivational" words and update them with flexbox and CSS to make them grow and shrink as well as reveal other words when clicked. Being that it involved CSS and flexbox I figured this challenge would be right up my alley!

Let me start by saying this was another challenge where I chose to just follow along with Wes's instruction instead of stopping early and solving it myself. Unlike before I made this decision after seeing how much of the CSS was already completed. There were a few instances that I would have liked to figure out myself that Wes already had done for me. This was in the transition timing. I am still not comfortable with this concept in CSS, also, what the hell is a cubic-bezier??? That in itself was a letdown...but that doesn't mean that there wasn't anything to gain from this challenge.

    .panel {
      background: #6B0F9C;
      box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
      color: white;
      text-align: center;
      align-items: center;
      /* Safari transitionend event.propertyName === flex */
      /* Chrome + FF transitionend event.propertyName === flex-grow */
      transition:
        font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        background 0.2s;
      font-size: 20px;
      background-size: cover;
      background-position: center;

Don't get me wrong. I completely understand why all of the HTML and most of the CSS work was already done before starting the challenge as the challenge itself is to have you focus on adding your own JavaScript and tweaking the CSS to make it functional. However I do still find myself struggling to work on someone else's code. I would rather make something completely from scratch and know the entire code inside and out. One positive about how each of these challenges is set up is that all of the code is in one HTML file. It is kind of nice not having to look through HTML, CSS and JavaScript files separately and have to piece together what everything does.

There was one thing that I found extremely cool in this lesson. I was unaware that it was possible to "grab" different elements through their CSS properties. This happened in a JavaScript function with e.propertyName.includes('flex'). I didn't even realize what was happening at the time, but looking back over the code now I see how this was done.

    const panels = document.querySelectorAll(".panel")

    function toggleOpen() {
      this.classList.toggle('open')
    }

    function toggleActive(e) {
      console.log(e.propertyName)
      if(e.propertyName.includes('flex')) {
         this.classList.toggle('open-active')
      }
      }

    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

I don't have too much more to say about this one as I did just follow along so I didn't learn too much on my own. I am almost excited to move on to the next challenge but being that I feel like each one of these posts is further removed from the last. On the bright side I should have some more free time coming up soon as I have officially put in my notice at work so I will be able to focus on coding full time! Cross your fingers that this works out for me and I will see you next time for: Ajax Type Ahead!...(what the hell does that even mean?)