Build a Flashcard Quiz App - Build a Flashcard Quiz App

Curriculum Help
1

Tell us what’s happening:

Everything seem to be working fine, please help me figure out why my code didn’t pass test, 6, 9 and 12

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 App</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div id="flashcard">
    <h2 id="question"></h2>
    <p id="answer"></p>
  </div>

  <button id="delete-btn">Delete</button>

  <form id="entry-form">
    <textarea
      id="front-text"
      placeholder="Enter question"
    ></textarea>

    <textarea
      id="back-text"
      placeholder="Enter answer"
    ></textarea>

    <button type="submit">Add Flashcard</button>
  </form>

  <script type="module" src="script.js"></script>
</body>
</html>

/* file: styles.css */
body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px;
}

#flashcard {
  width: 300px;
  min-height: 180px;
  border: 2px solid #333;
  padding: 20px;
  cursor: pointer;
  text-align: center;
}

#flashcard.flipped {
  background-color: #f2f2f2;
}

#answer {
  display: none;
}

#flashcard.flipped #answer {
  display: block;
}

#flashcard.flipped #question {
  display: none;
}

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

textarea {
  resize: vertical;
  min-height: 80px;
}

button {
  padding: 10px;
}

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

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

const currentCards: FlashCard[] = [
  {
    questionText: "What is TypeScript?",
    questionAnswer: "A typed superset of JavaScript."
  },
  {
    questionText: "What is HTML?",
    questionAnswer: "A markup language used to structure web pages."
  }
];

const flashcard = document.getElementById("flashcard") as HTMLDivElement;
const question = document.getElementById("question") as HTMLHeadingElement;
const answer = document.getElementById("answer") as HTMLParagraphElement;
const deleteBtn = document.getElementById("delete-btn") as HTMLButtonElement;
const entryForm = document.getElementById("entry-form") as HTMLFormElement;
const frontText = document.getElementById("front-text") as HTMLTextAreaElement;
const backText = document.getElementById("back-text") as HTMLTextAreaElement;

function displayCurrentCard(): void {
  if (currentCards.length === 0) {
    question.textContent = "";
    answer.textContent = "";
    return;
  }

  const currentCard = currentCards[currentCards.length - 1];
  question.textContent = currentCard.questionText;
  answer.textContent = currentCard.questionAnswer;
}

displayCurrentCard();

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

deleteBtn.addEventListener("click", () => {
  if (currentCards.length > 0) {
    currentCards.pop();
    flashcard.classList.remove("flipped");
    displayCurrentCard();
  }
});

entryForm.addEventListener("submit", (event: SubmitEvent) => {
  event.preventDefault();

  if (
    frontText.value.trim() === "" ||
    backText.value.trim() === ""
  ) {
    throw new InvalidUserInputError(
      "Question text and question answer cannot be empty."
    );
  }

  const newCard: FlashCard = {
    questionText: frontText.value.trim(),
    questionAnswer: backText.value.trim()
  };

  currentCards.push(newCard);

  frontText.value = "";
  backText.value = "";

  flashcard.classList.remove("flipped");
  displayCurrentCard();
});

Your browser information:

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

Hey @michaelobande39, can you please tell why are you including script.js file? I can only see following three files:

  1. index.html
    2.style.css
    3.index.ts
3

The app is written in TypeScript and browsers do not run .ts files directly

4

Thanks for drawing my attention to it anyway. I figured it out, the type wasn’t necessary

5

Happy to help! happy coding!

6

Hi! Just to clarify the issue a bit more: the problem is not necessarily in the quiz logic itself, but in how the script is being loaded.

In your HTML, check whether you are pointing to a file that actually exists in this challenge. If the available files are index.html, styles.css, and index.ts, then referencing a separate script.js file can cause the app not to load correctly.

Since this project uses TypeScript, the browser will not run the .ts file directly in a normal local setup. In a local project, TypeScript would need to be compiled into JavaScript first, and then the compiled .js file would be linked from the HTML.

So I would first make sure the HTML is not trying to load a missing or incorrect script file. Once the correct file/loading setup is fixed, then re-run the tests and check whether any logic-related errors remain.