Currently, I am developing a full stack application that utilizes JavaScript on both the front and back end. This application allows users to create their own flashcards set. Upon clicking "View Cards," the data is fetched and the question-answer pair is displayed on each side of the card. The app is designed to show one card at a time, with options for scrolling through other cards using the "Previous" or "Next" buttons. While I have successfully fetched and converted the data to JSON, as well as displayed at least one item from the database properly, I am facing issues when attempting to scroll through the cards. Sometimes the browser returns an error, and certain cards do not render both sides correctly. How can these problems be addressed?
const flashCard = document.querySelector(".flashcard");
const flipBtn = document.querySelector(".flip-btn");
const prevBtn = document.querySelector(".prev-btn");
const nextBtn = document.querySelector(".next-btn");
let frontOfCard = document.querySelector(".front-content");
let backOfCard = document.querySelector(".back-content");
const displayCards = () => {
getCardInfo()
flipBtn.innerHTML = "Flip"
flipBtn.removeEventListener("click", displayCards)
}
flipBtn.addEventListener("click", displayCards)
const flash = () => {
if (flashCard.style.transform != "rotateX(180deg)") {
flashCard.style.transform = "rotateX(180deg)"
} else {
flashCard.style.transform = "none"
}
}
const getCardInfo = async () => {
const itemBody = {
method: "PUT",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
}
}
const data = await fetch(window.location.href, itemBody)
const jsonData = await data.json()
console.log(jsonData)
let idx = 0;
frontOfCard.innerHTML = jsonData[idx].Answer
backOfCard.innerHTML = jsonData[idx].Question
flashCard.style.display = "block";
flipBtn.addEventListener("click", flash);
scrollThroughCards(idx, jsonData);
}
function scrollThroughCards(idx, data) {
prevBtn.addEventListener("click", (e) => {
flashCard.style.display = "none"
setTimeout(() => {
frontOfCard.innerHTML = data[idx--].Answer
backOfCard.innerHTML = data[idx--].Question
flashCard.style.display = "block"
}, 1000)
e.preventDefault()
})
nextBtn.addEventListener("click", (e) => {
flashCard.style.display = "none"
setTimeout(() => {
frontOfCard.innerHTML = data[idx++].Answer
backOfCard.innerHTML = data[idx++].Question
flashCard.style.display = "block"
}, 1000)
e.preventDefault()
})
}app.get("/card/:id", checkAuthenticated, async (req,res) => {
const { id } = req.params
const data = await Card.findAll({ where: { NoteId: id } });
res.render("cards-page", {
noteid: id,
Cards: data
})
});
app.put("/card/:id", checkAuthenticated, async (req,res) => {
const { id } = req.params
const data = await Card.findAll({ where: { NoteId: id } });
res.json(data)
})
app.post("/card/:id", checkAuthenticated, async (req, res) => {
const { Question, Answer, NoteId } = req.body;
const newCard = await Card.create({
Question,
Answer,
NoteId
});
res.redirect(`/card/${NoteId}`)
});