animation in problem section

virajchandra51 · Jan 5, 2023 · 0f67016 · 0f67016
1 parent 224f490
commit 0f67016
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 72 deletions.
diff --git a/src/components/eventCard/EventCard.js b/src/components/eventCard/EventCard.js
@@ -5,7 +5,7 @@ import './EventCard.css'
 const EventCard = ({img,title,date}) => {
   return (
     <div className="codeutsava__section3-card">
-        <img class='codeutsava__section3-image' src={img}></img>
+        <img className='codeutsava__section3-image' src={img}></img>
         <div className="codeutsava__section3-cardtitle">
             {title}
         </div>

diff --git a/src/components/faq/QuestionAccordian.js b/src/components/faq/QuestionAccordian.js
@@ -16,6 +16,7 @@ const Accordion = () => {
      <ul className="section7-accordion">
       {faqs.map((faq, index) => (
        <AccordionItem
+        key={index}
         onToggle={() => handleToggle(index)}
         faq = {faq}
         isActive = {index===activeAccordian}

diff --git a/src/components/problemCard/ProblemCard.css b/src/components/problemCard/ProblemCard.css
@@ -1,50 +1,80 @@
-.codeutsava__section8-problems-container{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 4rem;
-    width: 100%; 
+.codeutsava__section8-problems-container1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 4rem;
+  width: 100%;
 }
 
-.codeutsava__section8-card-body{
-    width: 40%;
+.codeutsava__section8-problems-container2 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 4rem;
+  width: 100%;
+  transition: display 3s ease-in-out;
+  margin-top: 4rem;
 }
 
-.codeutsava__section8-card{
-    padding-bottom: 0;
-    box-sizing: border-box;
-    font-family: 'Poppins', sans-serif;
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
-.codeutsava__section8-cardtitle{
-    font-weight:600;
-    margin: 0.5rem 0;
-    min-height: 3rem;
-    display: flex;
-    align-items: center;
-    line-height: 24px;
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
-.codeutsava__section8-line{
-    border: 0.1px solid rgb(230, 230, 230);
-    margin: 0.5rem 0;
-    font-weight: lighter;
+.codeutsava__section8-card-body {
+  width: 40%;
 }
 
-.codeutsava__section8-carddetails{
-    margin: 1rem 0;
-    color: rgb(220, 220, 220);
+.codeutsava__section8-card {
+  padding-bottom: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
 }
 
-.codeutsava__section8-image{
-    transition: all 0.2s ease-in-out;
-    width: 100%;
+.codeutsava__section8-cardtitle {
+  font-weight: 600;
+  margin: 0.5rem 0;
+  min-height: 3rem;
+  display: flex;
+  align-items: center;
+  line-height: 24px;
 }
 
-.codeutsava__section8-image:hover{
-    transform: scale(0.98);
-    transition: all 0.2s ease-in-out;
-    cursor: pointer;
-}
+.codeutsava__section8-line {
+  border: 0.1px solid rgb(230, 230, 230);
+  margin: 0.5rem 0;
+  font-weight: lighter;
+}
+
+.codeutsava__section8-carddetails {
+  margin: 1rem 0;
+  color: rgb(220, 220, 220);
+}
+
+.codeutsava__section8-image {
+  transition: all 0.2s ease-in-out;
+  width: 100%;
+}
+
+.codeutsava__section8-image:hover {
+  transform: scale(0.98);
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+}
diff --git a/src/components/problemCard/ProblemCard.js b/src/components/problemCard/ProblemCard.js
@@ -20,7 +20,7 @@ const ProblemCard = ({img,title,statement}) => {
   return (
     <div className="codeutsava__section8-card-body">
       <div className="codeutsava__section8-card">
-          <img class='codeutsava__section8-image' src={img} onClick={() => getProblem(img, title, statement)}></img>
+          <img className='codeutsava__section8-image' src={img} onClick={() => getProblem(img, title, statement)}></img>
           <div className="codeutsava__section8-cardtitle">
               {title}
           </div>

diff --git a/src/sections/section3/Section3.js b/src/sections/section3/Section3.js
@@ -28,7 +28,7 @@ const Section3 = () => {
                 <div className="codeutsava__section3-events">
                     <div className="codeutsava__section3-events-container" ref={scrollRef}>
                     {events.map((event,index) => (
-                        <EventCard img={event.img} title={event.title} date={event.date}/>
+                        <EventCard key={index} img={event.img} title={event.title} date={event.date}/>
                     ))}    
                     </div>
                 </div>

diff --git a/src/sections/section4/Section4.js b/src/sections/section4/Section4.js
@@ -13,7 +13,7 @@ const Section4 = () => {
         <div className="codeutsava__section4-title">Speakers</div>
         <div className="codeutsava__section4-speakers">
           {speakers.map((speaker, index) => (
-            <SpeakerCard img={speaker.img} name={speaker.name} position={speaker.position} description={speaker.description}
+            <SpeakerCard key={index} img={speaker.img} name={speaker.name} position={speaker.position} description={speaker.description}
             facebook={speaker.facebook} twitter={speaker.twitter} linkedin={speaker.linkedin} github={speaker.github} />
           ))}
         </div>

diff --git a/src/sections/section6/Section6.js b/src/sections/section6/Section6.js
@@ -19,31 +19,31 @@ const Section6 = () => {
           </div>
           <div className="codeutsava__section6-sponser-list platinum">
             {sponsers.platinum.map((sponser, index) => (
-              <img src={sponser.img} />
+              <img key={index} src={sponser.img} />
             ))}
           </div>
           <div className="codeutsava__section6-sponser-title">
             Gold Sponsors
           </div>
           <div className="codeutsava__section6-sponser-list gold">
             {sponsers.gold.map((sponser, index) => (
-              <img src={sponser.img} />
+              <img key={index} src={sponser.img} />
             ))}
           </div>
           <div className="codeutsava__section6-sponser-title">
             Silver Sponsors
           </div>
           <div className="codeutsava__section6-sponser-list silver">
             {sponsers.silver.map((sponser, index) => (
-              <img src={sponser.img} />
+              <img key={index} src={sponser.img} />
             ))}
           </div>
           <div className="codeutsava__section6-sponser-title">
             Bronze Sponsors
           </div>
           <div className="codeutsava__section6-sponser-list bronze">
             {sponsers.bronze.map((sponser, index) => (
-              <img src={sponser.img} />
+              <img key={index} src={sponser.img} />
             ))}
           </div>
         </div>

diff --git a/src/sections/section8/Section8.css b/src/sections/section8/Section8.css
@@ -26,7 +26,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  flex-direction: row;
+  flex-direction: column;
   width: 100%;
 }
 

diff --git a/src/sections/section8/Section8.js b/src/sections/section8/Section8.js
@@ -1,52 +1,72 @@
 import React from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 import "./Section8.css";
 
 import problems from "../../assets/data/problemsData.js";
 import ProblemCard from "../../components/problemCard/ProblemCard";
 
-const initialProblem = 2
+const initialProblem = 2;
 
 const Section8 = () => {
-  const [next, setNext] = useState(initialProblem);
-  const handleMoreProblems = () => {
-    setNext(problems.length);
-  };
-  const handleLessProblems = () => {
-    setNext(initialProblem);
+  const useFade = (initial) => {
+    const [show, setShow] = useState(initial);
+    const [isVisible, setVisible] = useState(show);
+    useEffect(() => {
+      if (show) setVisible(true);
+    }, [show]);
+    const onAnimationEnd = () => {
+      if (!show) setVisible(false);
+    };
+
+    const style = { animation: `${show ? "fadeIn 1.5s" : "fadeOut 0.2s"}` };
+    const fadeProps = {
+      style,
+      onAnimationEnd,
+    };
+    return [isVisible, setShow, fadeProps];
   };
-  console.log(next);
+  const [isVisible, setVisible, fadeProps] = useFade(false);
+
   return (
     <div className="codeutsava__section8" id="problems">
       <div className="codeutsava__section8-body">
         <div className="codeutsava__section8-title">Problem Statements</div>
         <div className="codeutsava__section8-problems">
-          <div className="codeutsava__section8-problems-container">
-            {problems.slice(0,next).map((problem, index) => (
-              <ProblemCard key={index}
+          <div className="codeutsava__section8-problems-container1">
+            {problems.slice(0, initialProblem).map((problem, index) => (
+              <ProblemCard
+                key={index}
                 img={problem.img}
                 title={problem.title}
                 statement={problem.statement}
               />
             ))}
           </div>
+          {isVisible && (
+            <div
+              className="codeutsava__section8-problems-container2"
+              {...fadeProps}
+            >
+              {problems
+                .slice(initialProblem, problems.length)
+                .map((problem, index) => (
+                  <ProblemCard
+                    key={index}
+                    img={problem.img}
+                    title={problem.title}
+                    statement={problem.statement}
+                  />
+                ))}
+            </div>
+          )}
         </div>
-        {
-            next<problems.length ? (
-                <button
-            className="codeutsava__section8-button"
-            onClick={handleMoreProblems}
-          >
-            Load more
-          </button>
-            ) : <button
-            className="codeutsava__section8-button"
-            onClick={handleLessProblems}
-          >
-            Show less
-          </button>
-        }
+        <button
+          className="codeutsava__section8-button"
+          onClick={() => setVisible(!isVisible)}
+        >
+          {isVisible === false ? "Load More" : "Show Less"}
+        </button>
       </div>
     </div>
   );