Flashcard

HTML

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.",
  },
];

let selectedId = null;

function handleClick(id) {
  const selectedCard = document.querySelector(`.flashcard[data-id='${id}']`);
  const isAlreadySelected = selectedId === id;

  if (isAlreadySelected) {
    selectedCard.querySelector("p").textContent = questions.find(
      (q) => q.id === id,
    ).question;
    selectedCard.classList.remove("selected");
    selectedId = null;
  } else {
    if (selectedId !== null) {
      const previousSelectedCard = document.querySelector(
        ".flashcard.selected",
      );
      previousSelectedCard.querySelector("p").textContent = questions.find(
        (q) => q.id === selectedId,
      ).question;
      previousSelectedCard.classList.remove("selected");
    }

    selectedCard.querySelector("p").textContent = questions.find(
      (q) => q.id === id,
    ).answer;
    selectedCard.classList.add("selected");
    selectedId = id;
  }
}

function createFlashCards() {
  const flashcardsContainer = document.createElement("div");
  flashcardsContainer.className = "flashcards";

  questions.forEach((question) => {
    const card = document.createElement("div");
    card.className = "flashcard";
    card.setAttribute("data-id", question.id);

    const p = document.createElement("p");
    p.textContent = question.question;

    card.appendChild(p);
    card.addEventListener("click", () => handleClick(question.id));

    flashcardsContainer.appendChild(card);
  });

  document.getElementById("app").appendChild(flashcardsContainer);
}

document.addEventListener("DOMContentLoaded", createFlashCards);

HTML FlashcardCSS FlashcardTS Flashcard