Build a Flashcard Quiz App - Build a Flashcard Quiz App

JavaScript
1

Tell us what’s happening:

I can’t completed these three test:

  1. When the delete-btn is clicked, a flashcard element should be removed from the currentCards collection.
  2. When the delete-btn is clicked, the previous flashcard data should be displayed.
  3. An InvalidUserInputError should be thrown when either the question text or question answer is empty in the entry form.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
    <h1>Flash Card Quiz App</h1>
    <div class="container">
      <div id="flashcard">
        <div id="front"></div>
        <div id="back"></div>
      </div>
      <div id="manage">
        <h2>Manage Cards</h2>
        <button id="delete-btn">Delete</button>
        <h3>All cards</h3>
        <div id="card-list"></div>
        <form id="entry-form" method="POST">
          <label for="front-text">Question: </label>
          <textarea id="front-text"></textarea>
          <label for="back-text">Answer: </label>
          <textarea id="back-text"></textarea>
          <input type="submit"/>
        </form>
      </div>
    </div>
    <script src="index.ts" type="module"></script>
  </body>
</html>

/* file: index.ts */
const flashcard = document.getElementById("flashcard") as HTMLDivElement;
const questionFlashcard = document.getElementById("front") as HTMLDivElement;
const answerFlashcard = document.getElementById("back") as HTMLDivElement;
const cardList = document.getElementById("card-list") as HTMLDivElement;
const deleteBtn = document.getElementById("delete-btn") as HTMLButtonElement;
const entryForm = document.getElementById("entry-form") as HTMLFormElement;
const questionEntry = document.getElementById("front-text") as HTMLTextAreaElement;
const answerEntry = document.getElementById("back-text") as HTMLTextAreaElement;

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

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

let currentCards: FlashCard[] = [];

const addFlashCard = (question: string, answer: string): void => {
  const card: FlashCard = {
    questionText: question,
    questionAnswer: answer
  }

  currentCards = [card, ...currentCards];
}

const displayCard = (index: number): void => {
  const card: FlashCard = currentCards.length > 0 ? currentCards[index] : { questionText: "", questionAnswer: "" };
  questionFlashcard.textContent = card.questionText;
  answerFlashcard.textContent = card.questionAnswer;
}

const deleteCard = (question: string, answer: string): void => {
  currentCards = currentCards.filter((card: FlashCard) => card.questionText !== question && card.questionAnswer !== answer);
}

const displayCardList = (): void => {
  cardList.innerHTML = "";
  currentCards.forEach((card: FlashCard) => {
    cardList.innerHTML += `
        <button style="margin-bottom: 10px" data-question="${card.questionText}" data-answer="${card.questionAnswer}">
          ${card.questionText.length > 22 ? card.questionText.slice(0,22) + "..." : card.questionText}
        </button>
    `
  }) 
}

displayCard(0);
displayCardList();

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

cardList.addEventListener("click", (e: Event) => {
  const btn = (e.target as HTMLElement).closest("button") as HTMLButtonElement;

  if(btn){
    questionFlashcard.textContent = btn.dataset.question as string;
    answerFlashcard.textContent = btn.dataset.answer as string;
  }
})

entryForm.addEventListener("submit", (e: Event) => {
  e.preventDefault();
  const question = questionEntry.value;
  const answer = answerEntry.value;
  if(question.trim() === "" || answer.trim() === ""){
    throw new InvalidUserInputError("Les champs ne doivent pas être vide!");
  }

  addFlashCard(question, answer);
  displayCard(0);
  displayCardList();
})

deleteBtn.addEventListener("click", (e: Event) => {
  const question: string = questionFlashcard.textContent;
  const answer: string = answerFlashcard.textContent;
  
  deleteCard(question, answer);
  displayCard(0);
  displayCardList();
})

/* file: styles.css */
* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

h1, h2, h3 {
  text-align: center;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 28px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

label {
  font-weight: bold;
}

button, input[type="submit"] {
  width: 100%;
  color: white;
  background-color: black;
  border: 1px solid black;
  border-radius: 20px;
}

button:hover, input[type="submit"]:hover {
  color: black;
  background-color: white;
  border: 1px solid black;
  border-radius: 20px;
}

.container {
  width: 70%;
  margin: 0 auto;
}

#flashcard {
  width: 80%;
  height: 300px;
  border: 1px solid black;
  border-radius: 20px;
  margin: 0 auto;
  transition: transform 0.7s;
  transform-style: preserve-3d;
}

#front, #back {
  font-size: 30px;
  font-weight: bold;
  position: absolute;
  text-align: center;
  backface-visibility: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#front {
  transform: rotateY(0deg);
}

#back {
  transform: rotateY(180deg);
}

#flashcard.flipped:hover {
  transform: rotateY(180deg);
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:151.0) Gecko/20100101 Firefox/151.0

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

hello @ShadowV5960 welcome to the forum!

try changing this to a button of submit type. the tests are expecting a button here.

also try removing the type="module" here.

3

Hello, it worked thank you ! :+1: