Build a Flashcard Quiz App - Build a Flashcard Quiz App

Curriculum Help
1

Tell us what’s happening:

only part I fail is “9. When the delete-btn is clicked, the previous flashcard data should be displayed.” It’s work as intended by display previous card to me

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flashcard</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>FLASHCARD APP</h1>
    <div class="container">
      <div id="flashcard">
      </div>
    </div>
    <div class="container">
      <button id="delete-btn">Delete this flashcard</button>
      <div id="cards-container"></div>
      <form id="entry-form">
        <label for="front-text">Question</label>
        <textarea id="front-text" rows="3"></textarea>
        <label for="back-text">Answer</label>
        <textarea id="back-text" rows="3"></textarea>
        <button type="submit">Add Flashcard</button>
      </form>
    </div>
    <script src="index.ts"></script>
  </body>
</html>

/* file: index.ts */
const flashCard = document.getElementById("flashcard") as HTMLElement;
const cardsContainer = document.getElementById("cards-container") as HTMLElement;
const form = document.getElementById("entry-form") as HTMLFormElement;
const frontText = document.getElementById("front-text") as HTMLTextAreaElement;
const backText = document.getElementById("back-text") as HTMLTextAreaElement;

interface FlashCard {
  questionText: string;
  questionAnswer: string;
}

const currentCards: FlashCard[] = [
  {
    questionText: "What is capital of Thailand?",
    questionAnswer: "Bangkok"
  },
  {
    questionText: "What is capital of France?",
    questionAnswer: "Paris"
  }
];

let savedIndex = 0;

class InvalidUserInputError extends Error {
  constructor(message: string){
    super(message);
    this.name = "InvalidUserInputError";
  }
}

const updateCardContainer = (): void => {
  cardsContainer.innerHTML = "";

  if (!currentCards.length) {
    cardsContainer.innerHTML = `<div class="card">Empty</div>`;
    return
  } 

  for (let i = 0; i < currentCards.length; i++) {
    cardsContainer.innerHTML += `
    <div class="card" data-index="${i}">${currentCards[i].questionText}</div>
    `
  }
}

const updateFlashCard = (): void => {
  if (!currentCards.length) {
    flashCard.textContent = "";
    return;
  }
  
  if (flashCard.classList.contains('flipped')) {
    flashCard.textContent = currentCards[savedIndex].questionAnswer;
  } else {
    flashCard.textContent = currentCards[savedIndex].questionText;
  }
}

flashCard.addEventListener("click", () => {
  flashCard.classList.toggle("flipped");
  updateFlashCard();
})

const deleteBtn = document.getElementById("delete-btn") as HTMLButtonElement;

deleteBtn.addEventListener("click", () => {
  if (!currentCards.length) return;

  currentCards.splice(savedIndex, 1);

  if (savedIndex > 0) {
    savedIndex--;
  }

  flashCard.classList.remove("flipped");
  updateCardContainer();
  updateFlashCard();
});

cardsContainer.addEventListener("click", (e) => {
  const target = e.target as HTMLElement;
  const clickedCard = target.closest(".card") as HTMLElement | null;

  if (!clickedCard) return;

  savedIndex = Number(clickedCard.dataset.index);
  flashCard.classList.remove("flipped");

  updateFlashCard();
});

form.addEventListener("submit", (e) => {
  e.preventDefault();

  if (!frontText.value || !backText.value) {
    throw new InvalidUserInputError("Question text and answer cannot be empty.");
  }
  
  const newObj = {
    questionText: frontText.value,
    questionAnswer: backText.value
  };
  currentCards.push(newObj);
  updateCardContainer();
});

document.addEventListener("DOMContentLoaded", () => {
  updateCardContainer();
  updateFlashCard();
})


/* file: styles.css */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #d1cdcd;
}

h1 {
  text-align: center;
  margin: 1rem;
}

.container {
  border: 5px solid gray;
  margin: 1rem;
  padding: 1rem;
  border-radius: 1rem;
}

#flashcard {
  border: 3px solid #4A4A4A;
  border-radius: 1rem;
  min-height: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0.5rem;
  font-size: 2.5rem;
  font-weight: bold;
  user-select: none;
  text-align: center;
}

button {
  display: block;
  width: 100%;
  font-size: 1.2rem;
  padding: 0.2rem;
  cursor: pointer;
}

button:hover {
  background-color: #3B3B3B;
  color: #F5F5F5;
}

#delete-btn {
  margin-bottom: 1rem;
}

#cards-container {
  border: 5px solid gray;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
  margin-bottom: 1.5rem;
}

.card {
  border: 3px solid black;
  border-radius: 1rem;
  text-align: center;
  padding: 0.5rem;
  font-weight: bold;
  font-size: 1.25rem;
  cursor: pointer;
}

.card:hover {
  background: #dbdbdb;
}

label {
  display: block;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

textarea {
  display: block;
  width: 100%;
  font-size: 1rem;
  padding: 0.5rem;
  margin-bottom: 1rem
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Safari/537.36

Challenge Information:

Build a Flashcard Quiz App - Build a Flashcard Quiz App

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-flashcard-quiz-app/69b868127999e97f1903f8e1.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Hi @AemAem,

Please take a look at this forum thread to help you troubleshoot your code:
Build a Flashcard Quiz App - Build a Flashcard Quiz App - Curriculum Help - The freeCodeCamp Forum

Happy coding