Tell us what’s happening:
Test 9 and 12 keeps failing to pass, even thou the UI updates correctly
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>Flashcard App</title>
<link rel="stylesheet" href="styles.css">
<script src="index.ts" defer></script>
</head>
<body>
<div class="app-container">
<header>
<h1>⚡ StudyDeck</h1>
</header>
<main class="flashcard-wrapper">
<!-- Added role="button" and tabindex so screen readers know this is interactive -->
<div id="flashcard" role="button" tabindex="0" aria-label="Flashcard. Press to flip.">
<div class="card-side card-front">
<h2 class="questionSide"></h2>
<span class="hint-text">💡 Tap to reveal answer</span>
</div>
<div class="card-side card-back">
<h2 class="answerSide"></h2>
<p class="card-text"></p>
<span class="hint-text">⚡ Click to flip back</span>
</div>
<p class="card-text noCards"></p>
</div>
</main>
<div class="controls">
<button type="button" class="btn btn-secondary" id="previous-btn">Previous</button>
<button type="button" class="btn btn-primary" id="next-btn">Next Card</button>
<button type="button" id="delete-btn">Delete Card</button>
</div>
<form id="entry-form">
<fieldset>
<legend>Add a new Card</legend>
<label for="front-text">Front:</label>
<textArea type="text" id="front-text"></textArea>
<label for="back-text">Back:</label>
<textArea type="text" id="back-text"></textArea>
<button type="submit" class="btn btn-submit">Save Card</button>
</fieldset>
</form>
</div>
</body>
</html>
/* file: styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.hidden {
display: none;
}
body {
background-color: #f7f9fc;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: #333;
}
.app-container {
width: 100%;
max-width: 450px;
padding: 20px;
text-align: center;
}
header h1 {
font-size: 24px;
color: #1a73e8;
margin-bottom: 5px;
}
header p {
font-size: 14px;
color: #666;
margin-bottom: 30px;
}
.flashcard-wrapper {
perspective: 1000px;
margin-bottom: 30px;
}
#flashcard {
width: 100%;
height: 300px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
border: none;
background: transparent;
}
#flashcard.flipped {
transform: rotateY(180deg);
}
.card-side {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 16px;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.card-front {
background-color: #ffffff;
border: 2px solid #e0e0e0;
}
.card-back {
background-color: #1a73e8;
color: #ffffff;
transform: rotateY(180deg);
}
.questionSide, .answerSide, .card-text {
font-size: 22px;
font-weight: 600;
line-height: 1.4;
margin: auto 0;
}
.hint-text {
font-size: 12px;
opacity: 0.8;
}
.card-back .hint-text {
color: #ffffff;
}
.controls {
display: flex;
justify-content: space-between;
gap: 10px;
margin-bottom: 25px;
}
.btn, #delete-btn {
flex: 1;
padding: 12px 16px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s, transform 0.1s;
}
.btn:active, #delete-btn:active {
transform: scale(0.98);
}
.btn-primary {
background-color: #1a73e8;
color: white;
}
.btn-primary:hover {
background-color: #1557b0;
}
.btn-secondary {
background-color: #e0e0e0;
color: #333;
}
.btn-secondary:hover {
background-color: #d0d0d0;
}
#delete-btn {
background-color: #ea4335;
color: #ffffff;
}
#delete-btn:hover {
background-color: #c5221f;
}
#entry-form fieldset {
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 20px;
background-color: #ffffff;
text-align: left;
}
#entry-form legend {
font-weight: 600;
padding: 0 10px;
color: #1a73e8;
}
#entry-form label {
display: block;
font-size: 14px;
font-weight: 500;
margin-top: 12px;
color: #555;
}
#entry-form input {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
outline: none;
transition: border-color 0.2s;
}
#entry-form input:focus {
border-color: #1a73e8;
}
.btn-submit {
margin-top: 15px;
width: 100%;
background-color: #34a853;
color: white;
}
.btn-submit:hover {
background-color: #2b8c44;
}
/* file: index.ts */
interface FlashCard{
questionText: string,
questionAnswer: string,
}
class InvalidUserInputError extends Error{
constructor(message: string){
super(message);
this.name = "InvalidUserInputError"
}
}
const currentCards: FlashCard[] = [
{
questionText: "What does HTML stand for?",
questionAnswer: "HyperText Markup Language",
},
{
questionText: "What does CSS stand for?",
questionAnswer: "Cascading Style Sheets"
},
{
questionText: "What does JS stand for?",
questionAnswer: "JavaScript"
},
{
questionText: "What does API stand for?",
questionAnswer: "Application Programming Interface"
},
{
questionText: "What does DOM stand for?",
questionAnswer: "Document Object Model",
}
];
let currentCardIndex = 0;
const displayCard = ()=>{
if (currentCards.length === 0) {
return;
}
const currEl = currentCards[currentCardIndex];
const questionSide = document.querySelector(".questionSide");
const answerSide = document.querySelector(".answerSide");
if(questionSide){
questionSide.textContent = currEl.questionText;
}
if(answerSide){
answerSide.textContent = currEl.questionAnswer
}
}
const card = document.getElementById('flashcard') as HTMLDivElement;
card?.addEventListener("click", ()=>{
card.classList.toggle("flipped")
});
const deleteBtn = document.getElementById('delete-btn') as HTMLButtonElement;
deleteBtn.addEventListener("click", ()=>{
if(currentCards.length > 0){
currentCards.splice(currentCardIndex,1);
card.classList.remove("flipped");
}
if(currentCards.length === 0){
card.textContent = "No cards left"
return;
}
if(currentCardIndex > 0){
currentCardIndex--;
}
displayCard()
});
displayCard();
document.getElementById("previous-btn")?.addEventListener("click", ()=>{
if(currentCardIndex > 0){
currentCardIndex--;
displayCard()
}
});
document.getElementById("next-btn")?.addEventListener("click", ()=>{
if(currentCardIndex < currentCards.length - 1){
currentCardIndex++;
displayCard()
}
})
const entryForm = document.getElementById("entry-form") as HTMLFormElement;
const frontText = document.getElementById("front-text")as HTMLTextAreaElement;
const backText = document.getElementById("back-text")as HTMLTextAreaElement;
entryForm?.addEventListener("submit", (e)=>{
e.preventDefault();
const frontContent = frontText.value;
const backContent = backText.value
if(frontContent.trim() === "" || backContent.trim() === ""){
throw new InvalidUserInputError("Please fill in the fields")
}
currentCards.push({
questionText: frontContent,
questionAnswer: backContent
});
frontText.value = "";
backText.value = "";
})
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.0.0.0 Safari/537.36
Challenge Information:
Build a Flashcard Quiz App - Build a Flashcard Quiz App