From 09d61a80ed8a87ad602075df7ef32946899e94b6 Mon Sep 17 00:00:00 2001 From: mahmoud_e <54193376+mektefaie@users.noreply.github.com> Date: Fri, 27 Dec 2024 16:44:37 -0800 Subject: [PATCH 1/4] Added Flashcards component by Mahmoud Ektefaie --- src/App.jsx | 97 ++++++++++++------- src/Author.jsx | 48 ++++----- src/components/mektefaie/FlashCards.jsx | 68 +++++++++++++ .../mektefaie/FlashCards.module.css | 37 +++++++ 4 files changed, 192 insertions(+), 58 deletions(-) create mode 100644 src/components/mektefaie/FlashCards.jsx create mode 100644 src/components/mektefaie/FlashCards.module.css diff --git a/src/App.jsx b/src/App.jsx index ea1ab99..c2e5558 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,72 +1,101 @@ -import { useState } from 'react'; -import Hero from './Hero'; -import Details from './components/kelixirr/Details'; -import Toast from './components/VictorEZCodes/Toast'; -import ProgressBar from './components/VictorEZCodes/ProgressBar'; -import ThemeSwitcher from './components/VictorEZCodes/ThemeSwitcher'; -import SearchFilter from './components/VictorEZCodes/SearchFilter'; -import FormValidator from './components/VictorEZCodes/FormValidator'; +import { useState } from 'react' +import Hero from './Hero' +import Details from './components/kelixirr/Details' +import Toast from './components/VictorEZCodes/Toast' +import ProgressBar from './components/VictorEZCodes/ProgressBar' +import ThemeSwitcher from './components/VictorEZCodes/ThemeSwitcher' +import SearchFilter from './components/VictorEZCodes/SearchFilter' +import FormValidator from './components/VictorEZCodes/FormValidator' +import FlashCards from './components/mektefaie/FlashCards' function App() { - const [showToast, setShowToast] = useState(false); - const [progress] = useState(0); + const [showToast, setShowToast] = useState(false) + const [progress] = useState(0) return ( <>
- + {/* Toast Demo Section */} -
+

Toast Notifications Demo

- {showToast && ( - setShowToast(false)} /> )}
{/* Progress Bar Demo Section */} -
+
{/* Theme Switcher Section */} -
+
{/* Search Filter Section */} -
+
{/* Form Validator Section */} -
+
+ + {/* FlashCards Section */} +
+ +
- ); + ) } -export default App; \ No newline at end of file +export default App diff --git a/src/Author.jsx b/src/Author.jsx index 8d8aa00..7b04456 100644 --- a/src/Author.jsx +++ b/src/Author.jsx @@ -1,43 +1,43 @@ -import { FaGithub } from "react-icons/fa"; +import { FaGithub } from 'react-icons/fa' export default function Author({ name, githubLink }) { return ( - ); + ) } diff --git a/src/components/mektefaie/FlashCards.jsx b/src/components/mektefaie/FlashCards.jsx new file mode 100644 index 0000000..58885f7 --- /dev/null +++ b/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 ( +
+

Flashcards

+

+ Interactive Flashcards: click on each card to reveal the answer. +

+
+ {cards.map(question => ( +
handleClick(question.id)} + > + {question.id === selectedId ? question.answer : question.question} +
+ ))} +
+ +
+ ) +} diff --git a/src/components/mektefaie/FlashCards.module.css b/src/components/mektefaie/FlashCards.module.css new file mode 100644 index 0000000..214b6bb --- /dev/null +++ b/src/components/mektefaie/FlashCards.module.css @@ -0,0 +1,37 @@ +.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); +} From c68cbadc478c3a04ee243031d0bb060a8e0e84a0 Mon Sep 17 00:00:00 2001 From: mahmoud_e <54193376+mektefaie@users.noreply.github.com> Date: Fri, 27 Dec 2024 18:22:53 -0800 Subject: [PATCH 2/4] Added responsiveness to Flashcards grid --- src/components/mektefaie/FlashCards.module.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/mektefaie/FlashCards.module.css b/src/components/mektefaie/FlashCards.module.css index 214b6bb..a705c80 100644 --- a/src/components/mektefaie/FlashCards.module.css +++ b/src/components/mektefaie/FlashCards.module.css @@ -35,3 +35,15 @@ color: #fff; font-weight: var(--font-weight-regular); } + +@media (max-width: 46rem) { + .flashcards { + grid-template-columns: 1fr 1fr; + } +} + +@media (max-width: 38rem) { + .flashcards { + grid-template-columns: 1fr; + } +} From 5a02c170b716520bdc9f18f1083180b8864bdc29 Mon Sep 17 00:00:00 2001 From: mahmoud_e <54193376+mektefaie@users.noreply.github.com> Date: Sat, 28 Dec 2024 15:44:58 -0800 Subject: [PATCH 3/4] Addes double quotes, semicolons, cleaned up App component and modified responsiveness in css. --- src/App.jsx | 10 +---- src/components/kelixirr/Details.jsx | 24 +++++------ src/components/mektefaie/FlashCards.jsx | 42 +++++++++---------- .../mektefaie/FlashCards.module.css | 6 ++- 4 files changed, 38 insertions(+), 44 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index c2e5558..eec3a4c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -85,15 +85,7 @@ function App() {
{/* FlashCards Section */} -
- -
+ ) } diff --git a/src/components/kelixirr/Details.jsx b/src/components/kelixirr/Details.jsx index 58f09c0..c48dd46 100644 --- a/src/components/kelixirr/Details.jsx +++ b/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) { @@ -30,8 +30,8 @@ export default function Details() {

Welcome to the ReactDevs project! This project allows contributors to add React components that are simple yet creative. - It's a great way to practice, collaborate, and learn React in an open source environment. Here is an - example: + It's a great way to practice, collaborate, and learn React in an + open source environment. Here is an example:

@@ -63,9 +63,9 @@ export default function Details() { Once you have created your component, add the Author component as shown above to get the credit. Here is the example code:

- 
-            
-              {`import { useState } from "react";
+        
+          
+            {`import { useState } from "react";
 import styles from "../your_username/Cart.module.css";
 import { FaCartShopping } from "react-icons/fa6";
 import { FiMinus, FiPlus } from "react-icons/fi";
@@ -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 (
     <>
       

-        

+          
+

Good Luck! We can' wait to see you being part of this project!{" "} (

- ) + ); } diff --git a/src/components/mektefaie/FlashCards.module.css b/src/components/mektefaie/FlashCards.module.css index a705c80..04dedb0 100644 --- a/src/components/mektefaie/FlashCards.module.css +++ b/src/components/mektefaie/FlashCards.module.css @@ -36,13 +36,15 @@ font-weight: var(--font-weight-regular); } -@media (max-width: 46rem) { +/* medium breakpoint */ +@media (max-width: 767px) { .flashcards { grid-template-columns: 1fr 1fr; } } -@media (max-width: 38rem) { +/* small breakpoint */ +@media (max-width: 639px) { .flashcards { grid-template-columns: 1fr; } From ccdd11c0887621456086d5c5cdcf51daff400ba8 Mon Sep 17 00:00:00 2001 From: mahmoud_e <54193376+mektefaie@users.noreply.github.com> Date: Sun, 29 Dec 2024 02:05:02 -0800 Subject: [PATCH 4/4] Added Falshcards component to App component --- src/App.jsx | 52 ++++------------------------------------------------ 1 file changed, 4 insertions(+), 48 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 4c946a5..916ce10 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -7,10 +7,11 @@ 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) - const [progress] = useState(0) + const [showToast, setShowToast] = useState(false); + const [progress] = useState(0); return ( <> @@ -45,54 +46,9 @@ function App() { /> )}
- - {/* Progress Bar Demo Section */} -
- -
- - {/* Theme Switcher Section */} -
- -
- - {/* Search Filter Section */} -
- -
- - {/* Form Validator Section */} -
- -
- - {/* FlashCards Section */} - ) + ); } export default App;