CODEWITHSUNDEEP
javascripthtmlcssnode.jsasynchronous
Zoko
Zoko

Reputation: 99

How do I get my data to display on flash cards using JavaScript?

Right now I'm working on full stack application that uses JS on the front and back end. This app lets a user generate their own set of flash cards. Whenever the user clicks "View Cards" data will then be fetched and will display the question and answer on each side of the card. It's supposed to display one card at a time and allows the user to scroll through other cards using either the "Previous" or "Next" buttons. I'm able to successfully fetch data convert it to JSON and can get at least one item from the data base display properly. The problem is whenever I try to scroll through the cards. I'm only able to scroll through some of the cards before the browser returns an error. I've even noticed that some of the cards won't render both sides properly. How could I address these issues?

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}`)
});

Upvotes: 0

Views: 591

Answers (1)

zvxayr
zvxayr

Reputation: 66

In the scrollThroughCards function, boundary checks were not performed and the increment and decrement operators were misused.

function scrollThroughCards(idx, data) {
  prevBtn.addEventListener("click", (e) => {
    // there's no more card on the left of index 0
    // so exit the function early
    if (idx <= 0) return;

    flashCard.style.display = "none"

    setTimeout(() => {
      idx--; // decrease the index first
      // then use the modified index
      frontOfCard.innerHTML = data[idx].Answer
      backOfCard.innerHTML = data[idx].Question
      flashCard.style.display = "block"
    }, 1000)

    e.preventDefault()
  })

  nextBtn.addEventListener("click", (e) => {
    // there's no more cards beyond the end of the list
    // so exit the function early
    if (idx >= data.length - 1) return;

    flashCard.style.display = "none"

    setTimeout(() => {
      idx++; // increase the index first
      // then use the modified index next
      frontOfCard.innerHTML = data[idx].Answer
      backOfCard.innerHTML = data[idx].Question
      flashCard.style.display = "block"
    }, 1000)

    e.preventDefault()
  })
}

Upvotes: 1

Related Questions