JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<body>
  <div>
    <button class='prev'>
      prev
    </button>
    <div class='flashCard'>
      
    </div>
    <button class='next'>
      next
    </button>
    <div class='pageNumbers'></div>
  </div>
</body>

CSS

.flashCard{
  width: 100px;
  height: 100px;
  border: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript

const cards = [{
    engValue: "Hello",
    frenchValue: "Bonjour"
  },
  {
    engValue: "Yaki",
    frenchValue: "sandas"
  },
  {
    engValue: "shembud",
    frenchValue: "gu pav"
  },
];
const pageSize = 1;
let currPage = 1;

const flashDiv = document.querySelector('.flashCard');
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
const pageNumbersDiv = document.querySelector('.pageNumbers');

function renderTable(data) {
  flashDiv.innerHTML = '';
  let translateWord = false;
  cards.filter((row, index) => {
    let start = (currPage - 1) * pageSize;
    let end = currPage * pageSize;
    if (index >= start && index < end) return true;
  }).forEach((data) => {
    const word = document.createElement('p');
    word.textContent = data.engValue;

    flashDiv.addEventListener('click', () => {
      if (translateWord) {
        word.textContent = data.engValue;
      } else {
        word.textContent = data.frenchValue;
      }
      translateWord = !translateWord;
    });

    flashDiv.appendChild(word);
  });
}

function renderPageNumbers() {
  pageNumbersDiv.innerHTML = '';
  const totalPages = Math.ceil(cards.length / pageSize);
  for (let i = 1; i <= totalPages; i++) {
    const pageNumber = document.createElement('button');
    pageNumber.textContent = i;

    pageNumber.addEventListener('click', () => {
      currPage = i;
      renderTable();
      renderPageNumbers();
    });

    pageNumbersDiv.appendChild(pageNumber);
  }
}

next.addEventListener('click', () => {
  if ((currPage * pageSize) < cards.length) currPage++;
  renderTable();
  renderPageNumbers();
});

prev.addEventListener('click', () => {
  if (currPage > 1) currPage--;
  renderTable();
  renderPageNumbers();
});

renderTable();
renderPageNumbers();