JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<html>
    <head></head>
    <body>
        <section class="flex">
            <button id="prev-btn" class="opacity-0"> Prev </button>
                <div id="flash-card">
                    <p>Hello </p>
                </div>
            <button id="next-btn" class=""> Next </button>
        </section>
    </body>
    <script src="./index.js"></script>
</html>

JavaScript

const learningLanguage = "french"
const defaultLanguage = "english"

let currentViewIndex = 0; // Inc and Dec
const flashCardEl = document.getElementById("flash-card");
const prevCardEl = document.getElementById("prev-btn");
const nextCardEl = document.getElementById("next-btn");


function handleCardClick() {
  const currentCard = cards[currentViewIndex];
  if (flashCardEl) {
    const paragraphEl = flashCardEl.getChild();
    if (paragraphEl) {
      const currentValue = paragraphEl.getText(); //
      currentCard.engValue === currentValue ? paragraphEl.setText(currentCard.frenchValue) : paragraphEl.setText(currentCard.engValue) // Toggle Value    
    }
  }

}

function handlePrevClick() {
  if (currentViewIndex > 0) {
    // currentViewIndex === cards.length - 1; call function to update nexBtn Classlist to show enable the button
    currentViewIndex = currentViewIndex - 1;
    renderFlashCard();
  }
}

function handleNextClick() {

  if (currentViewIndex < cards.length - 1) {
    // If cuurentIndex === 0 call function to update prevBtn Classlist to show enable the button
    currentViewIndex = currentViewIndex + 1;
    renderFlashCard();
  }

}


function renderFlashCard() {
  const currentCard = cards[currentViewIndex];
  const paragraph = document.createElement("p").setText(currentCard.engValue);
  if (flashCardEl.hasChild()) {
    delete flashCardEl.getChild()
  } // Remove the previous Card tag 

  if (flashCardEl) {
    flashCardEl.appendChild(paragraph);
  }
}

flashCardEl && flashCardEl.addEventListener("click", handleCardClick)
prevCardEl && prevCardEl.addEventListener("click", handlePrevClick)
nextCardEl && nextCardEl.addEventListener("click", handleNextClick)

renderFlashCard();