Flashcard

React JS

import "./styles.css";
import { useState } from "react";

export default function App() {
  return (
    <div className="App">
      <FlashCards />
    </div>
  );
}

const questions = [
  {
    id: 101,
    question: "What is the main purpose of Node.js?",
    answer: "To build scalable network applications using JavaScript.",
  },
  {
    id: 102,
    question: "What database is commonly used with MongoDB?",
    answer: "NoSQL database",
  },
  {
    id: 103,
    question: "What is the use of the 'useEffect' hook in React?",
    answer: "To handle side effects in function components.",
  },
  {
    id: 104,
    question:
      "What command is used to install dependencies in a Node.js project?",
    answer: "npm install",
  },
  {
    id: 105,
    question: "What is TypeScript?",
    answer: "A superset of JavaScript that adds static types.",
  },
  {
    id: 106,
    question: "What is REST API?",
    answer: "An API that follows REST principles for stateless communication.",
  },
];

function FlashCards() {
  const [selectedId, setSelectedId] = useState(null);

  function handleClick(id) {
    setSelectedId(id !== selectedId ? id : null);
  }

  return (
    <div className="flashcards">
      {questions.map((question) => (
        <div
          key={question.id}
          onClick={() => handleClick(question.id)}
          className={question.id === selectedId ? "selected" : ""}
        >
          <p>
            {question.id === selectedId ? question.answer : question.question}
          </p>
        </div>
      ))}
    </div>
  );
}

CSS Flashcard

React TS

import "./styles.css";
import { useState } from "react";

interface Question {
  id: number;
  question: string;
  answer: string;
}

const questions: Question[] = [
  {
    id: 101,
    question: "What is the main purpose of Node.js?",
    answer: "To build scalable network applications using JavaScript.",
  },
  {
    id: 102,
    question: "What database is commonly used with MongoDB?",
    answer: "NoSQL database",
  },
  {
    id: 103,
    question: "What is the use of the 'useEffect' hook in React?",
    answer: "To handle side effects in function components.",
  },
  {
    id: 104,
    question:
      "What command is used to install dependencies in a Node.js project?",
    answer: "npm install",
  },
  {
    id: 105,
    question: "What is TypeScript?",
    answer: "A superset of JavaScript that adds static types.",
  },
  {
    id: 106,
    question: "What is REST API?",
    answer: "An API that follows REST principles for stateless communication.",
  },
];

export default function App() {
  return (
    <div className="App">
      <FlashCards />
    </div>
  );
}

function FlashCards() {
  const [selectedId, setSelectedId] = useState<number | null>(null);

  function handleClick(id: number) {
    setSelectedId(id !== selectedId ? id : null);
  }

  return (
    <div className="flashcards">
      {questions.map((question) => (
        <div
          key={question.id}
          onClick={() => handleClick(question.id)}
          className={question.id === selectedId ? "selected" : ""}
        >
          <p>
            {question.id === selectedId ? question.answer : question.question}
          </p>
        </div>
      ))}
    </div>
  );
}

CSS Flashcard