Tell us what’s happening:
Stuck at test case 8/9/12 testcases. current having issue with delete-btn and invalidUserInputError. tested delete function out it seems to be normal as for InvalidUserInputError not sure if i doing right as well.
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>Document Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="main-app">
<div class = "flash-quiz-container">
<h2 class="header-quiz">Flash Card Quiz App</h2>
<div class="quiz-container">
<p id="flashcard">
</p>
</div>
</div>
<div class="main-flash-card-container">
<div class="delete-container">
<span class="sub-header">
Manage Cards
</span>
<button class="action-btn" id="delete-btn">Delete</button>
</div>
<hr>
<div class="delete-container">
<span class="sub-header">
All Cards
</span>
<div class="tasks-list-btn">
</div>
</div>
<hr>
<form id="entry-form">
<span class="sub-header">
Add new cards
</span>
<label for="front-text">
Front:
<textarea id="front-text" placeholder="Enter front of card..."></textarea>
</label>
<label for="back-text">
Back:
<textarea id="back-text" placeholder="Enter back of card..."></textarea>
</label>
<p id="invalid_input">
</p>
<button id="submit-task" class="action-btn">
Save new flash card
</button>
</form>
</div>
</div>
<script src="index.ts"></script>
</body>
</html>
/* file: index.ts */
interface FlashCard {
questionText: string;
questionAnswer: string;
}
let currentCards: FlashCard[] = [];
let currentIndex: number = -1;
const flashcardDisplay = document.getElementById("flashcard")!;
const deleteBtn = document.getElementById("delete-btn")!;
const entryForm = document.getElementById("entry-form") as HTMLFormElement;
const front_textfield = document.getElementById("front-text") as HTMLTextAreaElement;
const back_textfield = document.getElementById("back-text") as HTMLTextAreaElement;
const invalid_input = document.getElementById("invalid_input")!;
const taskList = document.querySelector(".tasks-list-btn") as HTMLElement;
class InvalidUserInputError extends Error {
front_text: string;
back_text: string;
constructor(message: string, front_text: string, back_text: string) {
super(message);
this.front_text = front_text;
this.back_text = back_text;
this.name = "InvalidUserInputError";
}
}
function renderTaskList() {
let html = "";
currentCards.forEach((card, index) => {
html += `<button class="action-btn task-item" data-index="${index}">${card.questionText}</button>`;
});
taskList.innerHTML = html;
}
flashcardDisplay.addEventListener("click", () => {
flashcardDisplay.classList.toggle("flipped");
if (currentIndex >= 0) {
const card = currentCards[currentIndex];
flashcardDisplay.textContent = flashcardDisplay.classList.contains("flipped")
? card.questionAnswer
: card.questionText;
}
});
deleteBtn.addEventListener("click", () => {
if (currentCards.length === 0) {
return;
}
currentCards.pop();
currentIndex = currentCards.length - 1;
console.log(currentCards);
flashcardDisplay.classList.remove("flipped");
flashcardDisplay.textContent = currentIndex >= 0 ? currentCards[currentIndex].questionText : "";
renderTaskList();
});
taskList.addEventListener("click", (e) => {
const target = e.target as HTMLElement;
if (target.matches(".task-item")) {
currentIndex = Number(target.dataset.index);
flashcardDisplay.classList.remove("flipped");
flashcardDisplay.textContent = currentCards[currentIndex].questionText;
}
});
entryForm.addEventListener("submit", (e) => {
e.preventDefault();
if (front_textfield.value === "") {
invalid_input.textContent = "⚠ Front text cannot be empty.";
throw new InvalidUserInputError(
"⚠ Front and back text cannot be empty.",
front_textfield.value,
back_textfield.value
);
}
else if (back_textfield.value === ""){
invalid_input.textContent = "⚠ Back text cannot be empty.";
throw new InvalidUserInputError(
"⚠ Back text cannot be empty.",
front_textfield.value,
back_textfield.value
);
}
invalid_input.textContent = "";
currentCards.push({
questionText: front_textfield.value,
questionAnswer: back_textfield.value,
});
currentIndex = currentCards.length - 1;
flashcardDisplay.classList.remove("flipped");
flashcardDisplay.textContent = currentCards[currentIndex].questionText;
renderTaskList();
front_textfield.value = "";
back_textfield.value = "";
});
/* file: styles.css */
body{
margin: 0;
padding: 0;
background:#007EA7;
gap: 10px 10px;
}
.flash-quiz-container{
width:400px;
margin:auto;
border:2px solid #003459;
padding: 20px;
border-radius: 20px;
display:flex;
flex-direction: column;
text-align:center;
}
.header-quiz{
font-size: 24px;
color: black;
}
.quiz{
color: black;
}
.main-flash-card-container{
width: 400px;
margin: auto;
border:2px solid #003459;
padding: 20px;
border-radius: 20px;
}
.delete-container{
display:flex;
flex-direction:column;
gap: 10px 10px;
}
.sub-header{
color:black;
font-size:24px;
font-weight:bold;
}
hr {
background-color: #00171F;
border: none;
height: 2px;
}
label{
display:flex;
flex-direction: column;
gap:5px 1px;
}
.action-btn{
text-align:center;
width:400px;
font-weight: bold;
font-style: italic;
font-size: 20px;
padding: 4px 2px;
background: #00A7E1;
border-radius: 20px;
}
.quiz-container{
border: 2px solid black;
border-radius: 20px;
background: white;
height:200px;
}
.action-btn:hover{
background: #007EA7;
}
.main-app{
display:flex;
flex-direction: column;
gap: 20px 10px;
margin: 20px;
}
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/152.0.0.0 Safari/537.36
Challenge Information:
Build a Flashcard Quiz App - Build a Flashcard Quiz App