Addes double quotes, semicolons, cleaned up App component and modified responsiveness in css.

Author: mektefaie

src/App.jsx

@@ -85,15 +85,7 @@ function App() {
  </div>
 
  {/* FlashCards Section */}
- <div
- style={{
- padding: '40px 20px',
- borderTop: '1px solid var(--border-color)',
- background: 'var(--background-color)',
- }}
- >
- <FlashCards />
- </div>
+ <FlashCards />
  </>
  )
 }

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() {
  <p>
  Welcome to the <strong>ReactDevs</strong> project! This project allows
  contributors to add React components that are simple yet creative.
- It&apos;s a great way to practice, collaborate, and learn React in an open source environment. Here is an
- example: 
+ It&apos;s a great way to practice, collaborate, and learn React in an
+ open source environment. Here is an example:
  </p>
 
  <div className={styles.cartContainer}>
@@ -63,17 +63,17 @@ 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:
  </p>
-  <pre className={styles.codeBlock}>
-  <code>
-  {`import { useState } from "react";
+ <pre className={styles.codeBlock}>
+ <code>
+ {`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";
 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}
@@ -115,8 +115,8 @@ export default function Cart() {
  </>
  );
 }`}
-  </code>
-  </pre>
+ </code>
+ </pre>
  <p style={{ textAlign: "center", marginTop: "2.4rem" }}>
  Good Luck! We can&apos; wait to see you being part of this project!{" "}
  <a

src/components/mektefaie/FlashCards.jsx

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

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;
  }