Tell us what’s happening:
Well here we go again
All tests pass except for n°9, yet the preview works perfectly fine.
I’ve been stuck on this for hours
What am I missing?
Thanks for the help y’all
Happy coding
MChance
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Flashcard Quiz</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale:1.0"/>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<main class="app-container">
<h1>Flash Quiz App</h1>
<div id="flashcard"></div>
<h2>All Cards</h2>
<div id="card-container"></div>
<div id="manage-cards">
<h2>Options</h2>
<button id="delete-btn">Delete Card</button>
<form id="entry-form">
<h3 id="add-card">Add New Card</h3>
<label for="front-text">Front:</label><br>
<textarea id="front-text" name="front-text" placeholder="Enter your question here..."></textarea>
<br>
<label for="back-text">Back:</label>
<br>
<textarea id="back-text" name="back-text" placeholder="Type the answer here"></textarea></br>
<button type="submit" id="submit">Add Card</button>
</form>
</div>
</main>
<script src="index.ts"></script>
</body>
</html>
/* file: index.ts */
interface FlashCard {
id: number;
questionText: string;
questionAnswer: string;
}
let currentCards: FlashCard[] = [{
id:0,
questionText: "Which composer did Nina Simone consider her biggest inspiration?",
questionAnswer: "Johann Sebastian Bach"
},{
id:1,
questionText: "Which French composer is widely known for having written the first treatise on orchestration?",
questionAnswer: "Hector Berlioz"
},{
id:2,
questionText: "What is the name of Richard Wagner's very last finished work?",
questionAnswer: "Parsifal"
},{
id:3,
questionText: "Who is considered the founding father of the French 'tragédie en musique'?",
questionAnswer: "Jean-Baptiste Lully"
}]
class InvalidUserInputError extends Error{
constructor(message: string){
super(message);
this.name = "InvalidUserInputError";
}
}
const flashCard = document.querySelector("#flashcard") as HTMLElement;
const frontText = document.getElementById("front-text") as HTMLInputElement;
const backText = document.getElementById("back-text") as HTMLInputElement;
const form = document.getElementById("entry-form") as HTMLFormElement;
const deleteBtn = document.getElementById("delete-btn") as HTMLButtonElement;
const cardsContainer = document.getElementById("card-container") as HTMLElement;
let index = 0;
function updateCardContainer(): void {
cardsContainer.innerHTML = "";
if (currentCards.length === 0) {
const emptyDiv = document.createElement("div");
emptyDiv.className = "card";
emptyDiv.textContent = "Empty";
cardsContainer.appendChild(emptyDiv);
return;
}
const fragment = document.createDocumentFragment();
currentCards.forEach((card, i) => {
const cardDiv = document.createElement("div");
cardDiv.className = "card";
cardDiv.dataset.index = i.toString();
cardDiv.textContent = card.questionText;
fragment.appendChild(cardDiv);
});
cardsContainer.appendChild(fragment);
}
function updateFlashCard(): void {
if (!currentCards.length) {
flashCard.textContent = "";
return;
}
if (flashCard.classList.contains('flipped')) {
flashCard.textContent = currentCards[index].questionAnswer;
} else {
flashCard.textContent = currentCards[index].questionText;
}
}
function flashcardFlipper () {
flashCard.classList.toggle("flipped");
updateFlashCard();
};
flashCard.addEventListener("click", () => {flashcardFlipper()})
deleteBtn.addEventListener("click", ():void => {
if (!currentCards.length){
frontText.textContent = ""
backText.textContent = ""
return;
} else {
currentCards.splice(index, 1);
if (index >= currentCards.length) {
index= currentCards.length-1;
}
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;
index = Number(clickedCard.dataset.index);
flashCard.classList.remove("flipped");
updateFlashCard();
});
form.addEventListener("submit", (e)=> {
e.preventDefault()
if (!frontText.value || !backText.value) {
alert("Text and answer cannot be empty")
} else {
const newObj:FlashCard = {
id: currentCards.length > 0 ? Math.max(...currentCards.map(c => c.id)) + 1 : 0,
questionText:frontText.value,
questionAnswer:backText.value
};
currentCards.push(newObj)
flashCard.classList.remove("flipped")
updateCardContainer();
updateFlashCard();
form.reset();
}
})
document.addEventListener("DOMContentLoaded", (): void => {
updateFlashCard();
updateCardContainer();
})
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 18_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.4 Mobile/15E148 Safari/604.1 OPT/6.6.2
Challenge Information:
Build a Flashcard Quiz App - Build a Flashcard Quiz App