Tell us what’s happening:
Hello, I’m working on this Flashcard Quiz app. everything is working as it should. The Logic is doing what the question is asking of it but i cant seem to pass question 12. Please help.
Your code so far
<!-- file: index.html -->
<link rel="stylesheet" href="styles.css" />
<div id="flashcard" class="card">
<div class="card-inner">
<div class="card-front">Click to Flip</div>
<div class="card-back">Answer</div>
</div>
</div>
<button id="delete-btn">Delete Card</button>
<form id="entry-form">
<textarea type="text" id="front-text" placeholder="Question" ></textarea>
<textarea type="text" id="back-text" placeholder="Answer" ></textarea>
<button type="submit">Add Flashcard</button>
<div id="error-message" style="color: red; display: none;"></div>
<script src="index.ts" type="module"></script>
</form>
/* file: styles.css */
/* file: index.ts */
interface FlashCard {
questionText: string;
questionAnswer: string;
}
class InvalidUserInputError extends Error {
constructor(message: string) {
super(message);
this.name = "InvalidUserInputError";
}
}
let currentCards: FlashCard[] = [
{ questionText: "What is the capitol of Mexico?", questionAnswer: "Mexico City" }
];
let currentIndex: number = 0;
const flashcardEl = document.getElementById("flashcard") as HTMLElement;
const deleteBtn = document.getElementById("delete-btn") as HTMLElement;
const entryForm = document.getElementById("entry-form") as HTMLFormElement;
const frontTextInput = document.getElementById("front-text") as HTMLInputElement;
const backTextInput = document.getElementById("back-text") as HTMLInputElement;
const errorDisplay = document.getElementById("error-message") as HTMLElement;
function updateCardDisplay() {
if (currentCards.length === 0) {
flashcardEl.innerHTML = '<div class="card-inner"><div class="card-front">No cards available</div></div>';
return;
}
const currentCard = currentCards[currentIndex];
flashcardEl.innerHTML = `
<div class="card-inner">
<div class="card-front">${currentCard.questionText}</div>
<div class="card-back">${currentCard.questionAnswer}</div>
</div>
`;
}
flashcardEl.addEventListener("click", () => {
flashcardEl.classList.toggle("flipped");
});
deleteBtn.addEventListener("click", () => {
if (currentCards.length === 0) return;
currentCards.splice(currentIndex, 1);
if (currentIndex >= currentCards.length && currentCards.length > 0) {
currentIndex--;
}
updateCardDisplay();
});
entryForm.addEventListener("submit", (e) => {
e.preventDefault();
errorDisplay.style.display = "none";
errorDisplay.textContent = "";
const question = frontTextInput.value.trim();
const answer = backTextInput.value.trim();
try {
if (!question || !answer) {
throw new InvalidUserInputError("Both question text and question answer are required!");
}
currentCards.push({ questionText: question, questionAnswer: answer });
currentIndex = currentCards.length - 1;
updateCardDisplay();
frontTextInput.value = "";
backTextInput.value = "";
} catch (error) {
if (error instanceof InvalidUserInputError) {
errorDisplay.textContent = error.message;
errorDisplay.style.display = "block";
} else {
console.error(error);
}
}
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36
Challenge Information:
Build a Flashcard Quiz App - Build a Flashcard Quiz App