Merge pull request #30 from cindyliu923/cindy/add-day-5

cindyliu923 · web-flow · commit 3fcb657e1959 · 2020-05-03T22:32:39.000+09:00
Cindy/add day 5
diff --git a/index.html b/index.html
@@ -116,7 +116,8 @@ <h5 class="font-weight-bold font-italic text-white team-tag p-2">TEAM</h5>
                     <li class="mt-3"><a href="#">Day#01｜<span class="text-white font-weight-bold">JavaScript Drum Kit</span></a></li>
                     <li class="mt-3"><a href="./js30/Cindy/Day2 - clock/index.html">Day#02｜<span class="text-white font-weight-bold">JS and CSS Clock</span></a></li>
                     <li class="mt-3"><a href="./js30/Cindy/Day3 - CSS variable/index.html">Day#03｜<span class="text-white font-weight-bold">CSS Variables</span></a></li>
-                    <li class="mt-3"><a href="./js30/Cindy/Day4 - Array Cardio/index.html">Day#04｜<span class="text-white font-weight-bold">Array Cardio Day 1</span></a></li>
+                    <li class="mt-3"><a href="./js30/Cindy/Day4 - Array Cardio/index.html">Day#04｜<span class="text-white font-weight-bold">Array Cardio</span></a></li>
+                    <li class="mt-3"><a href="./js30/Cindy/Day5 - Flex Chick/index.html">Day#05｜<span class="text-white font-weight-bold">Flex Chick</span></a></li>
                   </ul>
                 </div>
                 <div class="col-4">
@@ -210,4 +211,4 @@ <h4 class="text-center font-italic">Not available on mobile devices!!</h4>
     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
   </body>
-</html>
+</html>
diff --git a/js30/Cindy/Day5 - Flex Chick/index.html b/js30/Cindy/Day5 - Flex Chick/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Flex chicks 💪</title>
+</head>
+<body>
+  <style>
+    body {
+      margin: 0;
+    }
+
+    .chicks {
+      min-height: 100vh;
+      display: flex;
+      justify-content: center;
+    }
+
+    .chick {
+      align-self: center;
+      transition: all 1s 0s;
+      flex: 1;
+    }
+
+    .chick.transform {
+      transform: rotate(180deg);
+      flex: 0.5;
+    }
+
+    .chick.opacity {
+      opacity: 0.5;
+    }
+  </style>
+
+  <div class="chicks">
+    <img class="chick" alt="chick" src="https://i.imgur.com/mU42sAd.png" />
+    <img class="chick" alt="chick" src="https://i.imgur.com/mU42sAd.png" />
+    <img class="chick" alt="chick" src="https://i.imgur.com/mU42sAd.png" />
+    <img class="chick" alt="chick" src="https://i.imgur.com/mU42sAd.png" />
+    <img class="chick" alt="chick" src="https://i.imgur.com/mU42sAd.png" />
+    <img class="chick" alt="chick" src="https://i.imgur.com/mU42sAd.png" />
+    <img class="chick" alt="chick" src="https://i.imgur.com/mU42sAd.png" />
+    <img class="chick" alt="chick" src="https://i.imgur.com/mU42sAd.png" />
+    <img class="chick" alt="chick" src="https://i.imgur.com/mU42sAd.png" />
+    <img class="chick" alt="chick" src="https://i.imgur.com/mU42sAd.png" />
+  </div>
+
+  <script>
+    const chicks = document.querySelectorAll('.chick');
+
+    function toggleOpacity() {
+      this.classList.toggle('opacity');
+    }
+
+    function toggleTransform(e) {
+      if (e.propertyName === 'opacity') {
+        e.target.classList.toggle('transform');
+      }
+    }
+
+    chicks.forEach(chick => chick.addEventListener('mouseover', toggleOpacity));
+    chicks.forEach(chick => chick.addEventListener('transitionend', toggleTransform));
+  </script>
+
+</body>
+</html>
