Build a Flashcard Quiz App - Build a Flashcard Quiz App

Curriculum Help
1

Tell us what’s happening:

Test somehow fails on point 1 even though my HTML is correct

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>Flashcards</title>
</head>
<body>
    <div id="flashcard">
        <div id="front"></div>
        <div id="back"></div>
    </div>

    <h2>Manage Cards</h2>
    <button id="delete-btn" onclick="deleteCard()">Delete</button>

    <h3>All Cards</h3>
    <!-- List all cards from currentCards -->

    <h3>Add New Card</h3>
    <!-- Add new card to currentCards from HTML form submit -->
    <form id="entry-form">
        <textarea id="front-text" name="front" required></textarea>
        <textarea id="back-text" name="back" required></textarea>
        <button type="submit">Add Card</button>
    </form>

</body>
</html>

/* file: index.ts */
interface FlashCard {
  questionText: string;
  questionAnswer: string;
}

let currentCards: FlashCard[] = [
  {
    questionText: "Biggest city in America",
    questionAnswer: "New York"
  },
  {
    questionText: "Tallest skyscraper in the world",
    questionAnswer: "Burj Kalifa"
  },
];
const flashCard = document.getElementById("flashcard");
const front = document.getElementById("front");
const back = document.getElementById("back");

function displayCard(){
  const display: FlashCard | undefined = currentCards.at(-1);
  if (flashCard?.classList.contains('flipped')){
    back.textContent = display.questionAnswer;
  } else {
    front.textContent = display.questionText;
  }
  //document.getElementById("flashcard").textContent = display;
}

function flashFlipped(){  
  flashCard?.classList.add("flipped");
}

function deleteCard(){
  currentCards.pop();
}

function newCard(){
  const form = document.getElementById('entry-form') as HTMLFormElement;

  form.addEventListener('submit', (event: SubmitEvent): void => {
    // Prevent the default page reload
    event.preventDefault(); 
    // Your custom logic here
  });
  console.log(form);
}

// Define custom error
class InvalidUserInputError extends Error {
  constructor(message: string) {
    super(message);
    this.name = "InvalidUserInputError";
    Object.setPrototypeOf(this, InvalidUserInputError.prototype);
  }
}

// Validation function
function validateFormInputs(field1: string | null, field2: string | null): void {
  if (!field1 || field1.trim() === "") {
    throw new InvalidUserInputError("The first input field cannot be null or empty.");
  }
  
  if (!field2 || field2.trim() === "") {
    throw new InvalidUserInputError("The second input field cannot be null or empty.");
  }
  
  console.log("Validation passed successfully!");
}

// Example usage with DOM
const handleFormSubmit = (event: Event) => {
  event.preventDefault();
  
  const input1 = (document.getElementById("front-text") as HTMLInputElement).value;
  const input2 = (document.getElementById("back-text") as HTMLInputElement).value;

  try {
    validateFormInputs(input1, input2);
    // Proceed with form submission logic
  } catch (error) {
    if (error instanceof InvalidUserInputError) {
      console.error(error.message);
      // Display error message to the user in the UI
    } else {
      console.error("An unexpected error occurred:", error);
    }
  }
};

displayCard();

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.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

Tell us what’s happening:

Second attempt at getting support help. Changed code completely from first attempt, and after 5 hours of scouring for help/answers I can’t get requirements 6, 9, and 12 to trigger successfully.

Your code so far

<!-- file: index.html -->
<div id="flashcard">
        <div id="front"></div>
        <div id="back"></div>
    </div>

    <h2>Manage Cards</h2>
    <button id="delete-btn">Delete</button>

    <h3>All Cards</h3>
    <!-- List all cards from currentCards -->

    <h3>Add New Card</h3>
    <!-- Add new card to currentCards from HTML form submit -->
    <form id="entry-form">
        <textarea id="front-text" name="front" required></textarea>
        <textarea id="back-text" name="back" required></textarea>
        <button type="submit">Add Card</button>
    </form>

/* file: index.ts */
interface FlashCard {
  questionText: string;
  questionAnswer: string;
}

let currentCards: FlashCard[] = [
  {
    questionText: "Biggest city in America",
    questionAnswer: "New York"
  },
  {
    questionText: "Tallest skyscraper in the world",
    questionAnswer: "Burj Khalifa"
  }
];

const flashcard = document.getElementById("flashcard")!;
const front = document.getElementById("front")!;
const back = document.getElementById("back")!;
const deleteBtn = document.getElementById("delete-btn")!;
const form = document.getElementById("entry-form") as HTMLFormElement;
const frontText = document.getElementById("front-text") as HTMLTextAreaElement;
const backText = document.getElementById("back-text") as HTMLTextAreaElement;

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

function displayCard() {
  if (currentCards.length === 0) {
    front.textContent = "";
    back.textContent = "";
    return;
  }

  const card = currentCards[currentCards.length - 1];

  front.textContent = card.questionText;
  back.textContent = card.questionAnswer;
}

displayCard();

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

deleteBtn.addEventListener("click", () => {
  currentCards.pop();
  flashcard.classList.remove("flipped");
  displayCard();
});

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

  const question = frontText.value.trim();
  const answer = backText.value.trim();

  if (!question || !answer) {
    throw new InvalidUserInputError(
      "Question and answer cannot be empty."
    );
  }

  currentCards.push({
    questionText: question,
    questionAnswer: answer
  });

  flashcard.classList.remove("flipped");
  displayCard();

  frontText.value = "";
  backText.value = "";
});

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.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

3

Are you finished the app yet?

If I delete all of the code, HTML and JS, except for:

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<body>
    <div id="flashcard">
        <div id="front"></div>
        <div id="back"></div>
    </div>

</body>
</html>

It passes the first test.

Try to complete the rest of the functionality first? Maybe some code is removing or hiding that until you can add a card?

4

I am getting some errors as well:

Error: index.tsx(24,5): error TS18047: 'back' is possibly 'null'.
index.tsx(24,24): error TS18048: 'display' is possibly 'undefined'.
index.tsx(26,5): error TS18047: 'front' is possibly 'null'.
index.tsx(26,25): error TS18048: 'display' is possibly 'undefined'.
5

I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.

6

Welcome to the forum @naartjie.brand,

Try using the toggle method instead of add.

Your original HTML did not include a script tag to associate index.ts that I could see and, of course, your second HTML post is incomplete.

Happy coding

7

Hi, thanks. I went through my code and applied your suggestion to relink the index.ts file in my HTML (I originally had it in there but still failed the tests) and changed classlist.add to classlist.toggle which allowed checks 6 and 12 in the test to succeed. Still failed on 9, but realised it was because I had not comleted the add new card portion of the test (Which doesn’t immediately make sense, but overall does when I think back on it).

Thank you so much for your help and in pointing me to a direction which ended up solving this problem.