Tell us what’s happening:
Everything working as expected but 12 th is not passing.Invalid user input error
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div class="container">
<h1>Flash Card Quiz App</h1>
<div id="flashcard">
<div id="front">What is your name</div>
<div id="back">Abhishek Mahato</div>
</div>
</div>
<div class="container">
<h2>Manage Cards</h2>
<button id="delete-btn" class="btn">Delete</button>
<h3>All cards</h3>
<div id="card-list"></div>
<form id="entry-form" method="POST">
<label for="front-text">Question: </label>
<textarea id="front-text"></textarea>
<label for="back-text">Answer: </label>
<textarea id="back-text"></textarea>
<button id="submit-btn" class="btn" type="submit"/>Submit</button>
</form>
</div>
<script src="index.ts" type="module"></script>
</body>
</html>
/* file: styles.css */
body{
background-color:#012a4a;
color:white;
font-family:sans-serif;
}
.container{
background-color:#01497c;
width:70vw;
margin:2rem auto;
padding:2rem;
border-radius:1rem;
}
#entry-form{
margin:1rem 0;
display:flex;
flex-direction:column;
gap:1rem;
}
input{
padding:1rem;
border-radius:0.5rem;
}
.btn{
margin:1rem 0;
width:100%;
text-align:center;
background-color:#2c7da0;
padding:0.5rem;
border:none;
border-radius:0.5rem;
color:white;
font-weight:bold;
}
#flashcard{
background-color:#013a63;
padding:2rem;
border-radius:1rem;
transform-style:preserve-3d;
position:realtive;
display:flex;
align-items:center;
justify-content:center;
transition:transform 1s ease-in-out;
}
#fornt, #back{
position:absolute;
height:100%;
width:100%;
display:flex;
align-items:center;
justify-content:center;
transform-style:preserve-3d;
backface-visibility:hidden;
}
#front{
transform:rotateY(0);
background-color:#013a63;
}
#back{
transform:rotateY(180deg);
background-color:#013a63;
border-radius:1rem;
}
#flashcard:hover{
transform:rotateY(180deg);
}
#flashcard.flipped:hover{
transform:none;
}
/* file: index.ts */
const flashCard = document.querySelector("#flashcard") as HTMLElement;
const frontText =document.querySelector("#front-text") as HTMLTextAreaElement;
const backText = document.querySelector("#back-text") as HTMLTextAreaElement;
const deleteBtn= document.querySelector("#delete-btn") as HTMLButtonElement;
const submitBtn = document.querySelector("#submit-btn") as HTMLButtonElement;
const cardList = document.querySelector("#card-list") as HTMLElement
const entryForm = document.querySelector("#entry-form") as HTMLFormElement
const front = document.querySelector("#front") as HTMLFormElement
const back = document.querySelector("#back") as HTMLFormElement
interface FlashCard {
questionText:string;
questionAnswer:string;
}
const currentCards:FlashCard[]=[]
flashCard.addEventListener("click",()=>{
flashCard.classList.toggle('flipped')
})
class InvalidUserInputError extends Error {
constructor(message: string){
super(message);
this.name = "InvalidUserInputError";
}
}
function addCard(front:string,back:string){
currentCards.push({questionText:front,questionAnswer:back})
}
function showLists(cards:FlashCard[]){
cardList.innerHTML=''
if(currentCards.length>0){
cards.forEach((card)=>{
cardList.innerHTML+= `<div class="btn">${card.questionText.slice(0,20)} ...</div>`
return
})}
return
}
function showCard(){
front.textContent = ''
back.textContent = ''
if(currentCards.length>0){
front.textContent = currentCards[currentCards.length-1].questionText
back.textContent = currentCards[currentCards.length-1].questionAnswer
return
}
return
}
entryForm.addEventListener("submit",(e)=>{
e.preventDefault()
const front = frontText.value.trim();
const back = backText.value.trim();
function validateCard(front: string, back: string) {
if (!front || !back) {
throw new InvalidUserInputError("You should enter something!");
}
}
validateCard(front,back)
addCard(front,back);
showLists(currentCards)
showCard()
})
deleteBtn.addEventListener("click",()=>{
if (currentCards.length === 0) {
front.textContent = "";
back.textContent = "";
return;
} currentCards.pop()
showLists(currentCards)
showCard()
})
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 Edg/149.0.0.0
Challenge Information:
Build a Flashcard Quiz App - Build a Flashcard Quiz App