followed along w/exercise

Author: ErikSandvikSEA

05 - Flex Panel Gallery/index-START.html

@@ -26,7 +26,8 @@
     .panels {
       min-height: 100vh;
       overflow: hidden;
-    }
+      display: flex;
+      }
 
     .panel {
       background: #6B0F9C;
@@ -37,12 +38,17 @@
       /* 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),
+        font-size 1s cubic-bezier(0.61,-0.19, 0.7,-0.11),
+        flex 1s cubic-bezier(0.61,-0.19, 0.7,-0.11),
         background 0.2s;
       font-size: 20px;
       background-size: cover;
       background-position: center;
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      flex-direction: column;
     }
 
     .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
@@ -56,8 +62,19 @@
       margin: 0;
       width: 100%;
       transition: transform 0.5s;
+      border: 1px solid red;
+      flex: 1 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
 
+    .panel > *:first-child { transform: translateY(-75%);}
+    .panel.open-active > *:first-child { transform: translateY(0);}
+    .panel > *:last-child {transform: translateY(90%);}
+    .panel.open-active > *:last-child { transform: translateY(0);}
+
+
     .panel p {
       text-transform: uppercase;
       font-family: 'Amatic SC', cursive;
@@ -71,6 +88,7 @@
 
     .panel.open {
       font-size: 40px;
+      flex: 5;
     }
 
   </style>
@@ -105,6 +123,22 @@
   </div>
 
   <script>
+      const panels = document.querySelectorAll('.panel');
+
+      function toggleOpen(){
+        console.log('Hello');
+        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));
 
   </script>