Merge branch 'unit/25-event'

README.md

@@ -92,7 +92,7 @@ You're going to need : Node.js v18.16.0 or newer
 - [x] Day 22 - Follow Along Links
 - [x] Day 23 - Speech Synthesis
 - [x] Day 24 - Sticky Nav
-- [ ] Day 25 - Event Capture, Propagation, Bubbling and Once
+- [x] Day 25 - Event Capture, Propagation, Bubbling and Once
 - [ ] Day 26 - Stripe Follow Along Dropdown
 - [ ] Day 27 - Click and Drag to Scroll
 - [ ] Day 28 - Video Speed Controller UI

src/Pages/25Event/index.jsx

@@ -0,0 +1,53 @@
+import { useEffect, useRef, useState } from 'react';
+import { LayoutCol1 } from '@/Layouts';
+import { Title } from '@/Components';
+import styles from './styles.module.scss';
+
+const EventPage = () => {
+  return (
+    <LayoutCol1 baseClassName={styles.page}>
+      <Title title='Event Capture' titleColor='#777' />
+
+      <Div areaName='A area' areaClass={styles.area_a}>
+        <Div areaName='B area' areaClass={styles.area_b}>
+          <Div areaName='C area' areaClass={styles.area_c} />
+        </Div>
+      </Div>
+    </LayoutCol1>
+  );
+};
+
+export default EventPage;
+
+const Div = ({ areaName, areaClass, children }) => {
+  const ref = useRef(0);
+
+  const [clickNum, setClickNum] = useState(0);
+  const [isShow, setIsShow] = useState(false);
+  const hintClass = isShow ? styles.hintShow : styles.hintHide;
+
+  useEffect(() => {
+    if (!ref.current || !clickNum) {
+      ref.current += 1;
+    } else {
+      setIsShow(true);
+      setTimeout(() => setIsShow(false), 1000);
+    }
+  }, [clickNum]);
+
+  return (
+    <div
+      className={areaClass}
+      onClick={() => setClickNum(prev => prev + 1)}
+      role='button'
+      tabIndex={0}
+    >
+      <div>
+        <span>{areaName}</span>
+        <span className={hintClass}>+1</span>
+      </div>
+      <p>Clicked Times : {clickNum}</p>
+      {children}
+    </div>
+  );
+};

src/Pages/25Event/styles.module.scss

@@ -0,0 +1,78 @@
+.page {
+  position: relative;
+  background: #dedede;
+}
+
+%area {
+  cursor: pointer;
+
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+
+  width: 100%;
+  padding: 2rem;
+
+  border-radius: 1rem;
+  box-shadow: 0 0 1rem 0 rgba($color: #000, $alpha: 20%);
+
+  & div:first-child {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+
+    & span:first-child {
+      padding: 0.5rem 1rem;
+      color: #346a6d;
+      background-color: #fff;
+      border-radius: 1rem;
+    }
+  }
+
+  & p {
+    width: fit-content;
+    font-weight: 500;
+    color: #fff;
+
+    &:first-child {
+      width: fit-content;
+    }
+  }
+}
+
+.area {
+  &_a {
+    @extend %area;
+
+    background-color: #3d5a5b;
+  }
+
+  &_b {
+    @extend %area;
+
+    background-color: #677f7f;
+  }
+
+  &_c {
+    @extend %area;
+
+    background-color: #95aaab;
+  }
+}
+
+%hint {
+  color: #fff;
+  transition: opacity 0.2s cubic-bezier(0, 0, 0.03, 0.98);
+}
+
+.hintShow {
+  @extend %hint;
+
+  opacity: 1;
+}
+
+.hintHide {
+  @extend %hint;
+
+  opacity: 0;
+}

src/Pages/HomePage/data.jsx

@@ -370,7 +370,7 @@ export const data = [
   },
   {
     id: 25,
-    title: 'Event Capture, Propagation, Bubbling and Once',
+    title: 'Event Capture',
     images: {
       base: base25,
       s1x: s1x25,
@@ -381,7 +381,7 @@ export const data = [
       l1x: l1x25,
       l2x: l2x25,
     },
-    focus: '-',
+    focus: 'Event Propagation',
   },
   {
     id: 26,

src/routesConfig.jsx

@@ -25,6 +25,7 @@ const GeolocationPage = lazy(() => import('./Pages/21Geolocation'));
 const FollowLinksPage = lazy(() => import('./Pages/22FollowLinks'));
 const WordToSpeechPage = lazy(() => import('./Pages/23WordToSpeech'));
 const StickyNavPage = lazy(() => import('./Pages/24StickyNav'));
+const EventPage = lazy(() => import('./Pages/25Event'));
 
 export const routes = [
   { id: 0, path: '/', element: <HomePage /> },
@@ -52,4 +53,5 @@ export const routes = [
   { id: 22, path: '22', element: <FollowLinksPage /> },
   { id: 23, path: '23', element: <WordToSpeechPage /> },
   { id: 24, path: '24', element: <StickyNavPage /> },
+  { id: 25, path: '25', element: <EventPage /> },
 ];