Added Flashcards component by Mahmoud Ektefaie

src/App.jsx

@@ -7,6 +7,7 @@ import ThemeSwitcher from "./components/VictorEZCodes/ThemeSwitcher";
 import SearchFilter from "./components/VictorEZCodes/SearchFilter";
 import FormValidator from "./components/VictorEZCodes/FormValidator";
 import AccordionItems from "./components/kelixirr/AccordionItems";
+import FlashCards from "./components/mektefaie/FlashCards";
 
 function App() {
   const [showToast, setShowToast] = useState(false);
@@ -45,6 +46,7 @@ function App() {
           />
         )}
       </div>
+      <FlashCards />
     </>
   );
 }

src/Author.jsx

@@ -1,4 +1,4 @@
-import { FaGithub } from "react-icons/fa";
+import { FaGithub } from 'react-icons/fa'
 
 export default function Author({ name, githubLink }) {
   return (
@@ -24,22 +24,22 @@ export default function Author({ name, githubLink }) {
       <span>•</span>
       <a
         href={githubLink}
-        target="_blank"
-        rel="noopener noreferrer"
+        target='_blank'
+        rel='noopener noreferrer'
         style={{
-          display: "flex",
-          alignItems: "center",
-          gap: "0.25rem",
-          color: "#0070f3",
-          textDecoration: "none",
-          transition: "color 0.2s ease",
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.25rem',
+          color: '#0070f3',
+          textDecoration: 'none',
+          transition: 'color 0.2s ease',
         }}
-        onMouseOver={(e) => (e.currentTarget.style.color = "#0051af")}
-        onMouseOut={(e) => (e.currentTarget.style.color = "#0070f3")}
+        onMouseOver={e => (e.currentTarget.style.color = '#0051af')}
+        onMouseOut={e => (e.currentTarget.style.color = '#0070f3')}
       >
         <FaGithub />
         GitHub
       </a>
     </div>
-  );
+  )
 }

src/components/kelixirr/Details.jsx

@@ -6,8 +6,8 @@ import Author from "../../Author";
 export default function Details() {
   const [count, setCount] = useState(0);
 
-  const handleCount = (type) => {
-    setCount((prev) => {
+  const handleCount = type => {
+    setCount(prev => {
       if (type === "increase" && prev < 20) {
         return prev + 1;
       } else if (type === "decrease" && prev > 0) {
@@ -73,7 +73,7 @@ import Author from "../../Author";
 
 export default function Cart() {
   const [count, setCount] = useState(0);
-  
+
   const handleCount = (type) => {
     setCount((prev) => {
       if (type === "increase" && prev < 20) {
@@ -88,7 +88,7 @@ export default function Cart() {
   return (
     <>
       <div className={styles.cartContainer}>
-        <button 
+        <button
           className={styles.cartButton}
           onClick={() => handleCount("decrease")}
           disabled={count === 0}
@@ -103,7 +103,7 @@ export default function Cart() {
             ? \`\${count} - items in your cart\`
             : \`\${count} - Your cart is empty\`}
         </p>
-        <button 
+        <button
           className={styles.cartButton}
           onClick={() => handleCount("increase")}
           disabled={count === 20}

src/components/mektefaie/FlashCards.jsx

@@ -0,0 +1,68 @@
+import styles from "../mektefaie/FlashCards.module.css";
+import Author from "../../Author";
+import { useState } from "react";
+
+const cards = [
+  {
+    id: 1,
+    question: "The creator of ReactDevs project?",
+    answer: "Amritesh Kumar",
+  },
+  {
+    id: 2,
+    question: "When was ReactDevs project created?",
+    answer: "2024",
+  },
+  {
+    id: 3,
+    question: "The first contributor to ReactDevs project?",
+    answer: "Victor Ezeanyika",
+  },
+  {
+    id: 4,
+    question: "Best React course?",
+    answer: "Jonas Schmedtmann's Ultimate React course on Udemy",
+  },
+  {
+    id: 5,
+    question: "Best Frontend bootcamp?",
+    answer: "Scrimba.com",
+  },
+  {
+    id: 6,
+    question: "Best Backend bootcamp?",
+    answer: "Boot.dev",
+  },
+];
+
+export default function FlashCards() {
+  const [selectedId, setSelectedID] = useState(null);
+
+  function handleClick(id) {
+    setSelectedID(id === selectedId ? null : id);
+  }
+
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.description}>Flashcards</h2>
+      <p className={styles.description}>
+        Interactive Flashcards: click on each card to reveal the answer.
+      </p>
+      <div className={styles.flashcards}>
+        {cards.map(question => (
+          <div
+            key={question.id}
+            className={question.id === selectedId ? styles.selected : ""}
+            onClick={() => handleClick(question.id)}
+          >
+            {question.id === selectedId ? question.answer : question.question}
+          </div>
+        ))}
+      </div>
+      <Author
+        name="Mahmoud Ektefaie"
+        githubLink="https://github.com/mektefaie"
+      />
+    </section>
+  );
+}

src/components/mektefaie/FlashCards.module.css

@@ -0,0 +1,51 @@
+.section {
+  max-width: var(--max-width-content);
+  margin: var(--spacing-xl-5) auto;
+  padding: var(--spacing-lg);
+}
+
+.description {
+  margin-bottom: var(--spacing-xl);
+  text-align: center;
+  color: var(--text-color);
+}
+
+.flashcards {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 20px;
+}
+
+.flashcards div {
+  border: 1px solid var(--border-color);
+  background-color: var(--border-color);
+  border-radius: var(--border-radius-md);
+  aspect-ratio: 2 / 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 20px;
+  cursor: pointer;
+}
+
+.selected {
+  border: 1px solid var(--primary-color) !important;
+  background-color: var(--primary-color) !important;
+  color: #fff;
+  font-weight: var(--font-weight-regular);
+}
+
+/* medium breakpoint */
+@media (max-width: 767px) {
+  .flashcards {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+/* small breakpoint */
+@media (max-width: 639px) {
+  .flashcards {
+    grid-template-columns: 1fr;
+  }
+}