Tell us what’s happening:
I can’t pass the 9th test “When you click the delete button it should show the previous card information.”
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Flashcard Quiz</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div id="card-container">
<h1>Flash Card Quiz App</h1>
<div id="flip-container">
<div id="flashcard" class="flipped"></div>
</div>
</div>
<div id="manage-cards">
<h2>Manage Cards</h2>
<button id="delete-btn">Delete</button>
<hr/>
<div id="all-cards-container">
<h4>All Cards</h4>
<div id="cards-list"></div>
</div>
<form id="entry-form">
<h4>Add a New Card</h4>
<hr/>
<label class="label"
for="front-text">Front:</label>
<textarea class="input" id="front-text" ></textarea>
<label class="label" for="back-text">Back:</label>
<textarea class="input" id="back-text" ></textarea>
<button id="new-card" type="submit">Save new flash card</button>
</form>
</div>
<script src="index.ts"></script>
</body>
</html>
/* file: styles.css */
body{
background-color: #cccccc;
font-family: sans-serif;
}
#card-container{
background-color: rgba(230, 240, 255, 0.9);
padding: 3vw;
padding-bottom: 10vh;
border-radius: 8px;
border: none;
margin: auto;
margin-bottom: 20px;
width: 95%;
text-align: center;
}
h1{
font-weight: 800;
font-size: 7vh;
}
#flashcard, .cardInfo{
display: flex;
justify-content: center;
align-items: center;
margin: auto;
box-shadow: 2px 2px 2px 2px #4d4d4d;
background-color: #cccccc;
height: 40vh;
width: 70vw;
border-radius: 16px;
}
#manage-cards{
background-color: rgba(230, 240, 255, 0.9);
padding: 2vw;
border-radius: 8px;
border: none;
margin: auto;
}
.label, .input, button{
display: block;
width: 100%;
padding: 1vh;
border: none;
border-radius: 4px;
color: black;
font-weight: 400;
}
button{
height: 6vh;
font-family: sans-serif;
font-size: 3vh;
font-weight: 700;
background-color: #80b3ff;
margin-top: 30px;
margin-bottom: 30px;
}
.input{
height: 15vh;
background-color: #cccccc;
color: black;
font-size: 3vh;
}
hr{
background-color: #999999;
}
button:hover{
background-color: #0066ff;
color: white;
}
.flip-container{
perspective: 1000px;
background-color: #80b3ff;
padding-top: 10vw;
padding-bottom: 10vh;
border-radius: 15px;
border: none;
box-shadow: 2px 2px 2px 2px #0066ff;
margin: auto;
margin-bottom: 20px;
width: 95%;
text-align: center;
}
.flipped{
transform: rotateY(360deg);
}
/* file: index.ts */
interface FlashCard{
questionText: string;
questionAnswer: string;
}
const card = document.getElementById("flashcard") as HTMLDivElement;
const frontText = document.getElementById("front-text") as HTMLTextAreaElement;
const backText = document.getElementById("back-text") as HTMLTextAreaElement;
const deleteBtn = document.getElementById("delete-btn") as HTMLButtonElement;
const allCards = document.getElementById("cards-list") as HTMLDivElement;
const entryForm = document.getElementById("entry-form") as HTMLFormElement;
let currentIndex:number = 0
let currentCards:FlashCard[] = [
{questionText: "What color is an alligator?",
questionAnswer: "Green" },
{
questionText: "What planet has the most moons?",
questionAnswer: "Saturn"
}
]
class InvalidUserInputError extends Error{
constructor(message: string){
super(message)
this.name = "InvalidUserInputError";
}
}
function testText(front: string, back: string):void{
if(front === '' || back === ''){
throw new InvalidUserInputError("Invalid User Input Error");
}
}
const cardsDisplayBtn = ():void => {
currentCards.forEach((item) => {
if(currentCards.length > 0){
card.classList.toggle("flipped")
}
const childEl = document.createElement("button") as HTMLButtonElement;
childEl.innerText = item.questionText
allCards?.appendChild(childEl);
accessBtnInfo(childEl)
})
}
function storeValues ():void{
cardsDisplayBtn()
entryForm?.addEventListener("submit", (e: SubmitEvent) => {
e.preventDefault()
testText(frontText.value, backText.value)
currentCards = [...currentCards, {questionText: frontText.value, questionAnswer: backText.value}]
const childEl = document.createElement("button") as HTMLButtonElement;
childEl.innerText = frontText.value
allCards?.appendChild(childEl);
accessBtnInfo(childEl)
frontText.value = ''
backText.value = ''
})
}
storeValues()
function accessBtnInfo ( btn: HTMLButtonElement):void {
btn.addEventListener("click", () => {
currentCards.forEach((item) => {
if(item.questionText === btn.innerText){
currentIndex = currentCards.indexOf(item)
flipCard(btn, item)
card.innerText = btn.innerText
console.log(btn.innerText)
}
})
deleteCard(btn, currentCards[currentIndex])
})
}
function flipCard (btn: HTMLButtonElement, item: FlashCard): string | undefined {
let result = ''
card.addEventListener("click", () => {
card.innerText = ''
if(currentCards.length < 0){
return result = "Add a card"
}
if(!card.classList.contains("flipped") && currentCards.includes(item)){
result = item.questionText;
}
else if(card.classList.contains("flipped") || card.innerText === item.questionText && currentCards.includes(item) || card.innerText === item.questionAnswer){
result = item.questionAnswer;
}
card.innerText = result
})
return result
}
function deleteCard (btn: HTMLButtonElement, item: FlashCard) {
deleteBtn?.addEventListener("click", () => {
if(currentCards.length === 0 || currentIndex < 0){
btn.remove()
return card.innerText = "Card list is empty"
}
currentCards.splice(currentIndex, 1);
currentIndex--
card.innerText = currentCards[currentIndex].questionText;
if(btn.innerText === item.questionText){
btn.remove()
}
flipCard(btn, currentCards[currentIndex])
});
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Safari/537.36
Challenge Information:
Build a Flashcard Quiz App - Build a Flashcard Quiz App