text: const cards = document.querySelectorAll('.memory-card');
  
  let hasFlippedCard = false;
  let lockBoard = false;
  let firstCard, secondCard;
  
  // to flip the card over
  function flipCard() {
    if (lockBoard) return;
    if (this === firstCard) return;
    this.classList.add('flip');
  
    if (!hasFlippedCard) {
      hasFlippedCard = true;
      firstCard = this;
      return;
    }
  
    secondCard = this;
    lockBoard = true;
  
    checkForMatch();
  }
  
  // to check if the cards match
  function checkForMatch(){
    if (firstCard.dataset.image === secondCard.dataset.image) {
      disableCards();
      return;
    }
  
    unflipCards();
  }
  // if not a match, take away click event
  function disableCards(){
    firstCard.removeEventListener('click', flipCard);
    secondCard.removeEventListener('click', flipCard);
  
    resetBoard();
  }
  
  function unflipCards() {
    setTimeout(() => {
      firstCard.classList.remove('flip');
      secondCard.classList.remove('flip');
  
      resetBoard();
    }, 500);
  }
  
  // reset first and second card after been clicked 
  function resetBoard() {
    [hasFlippedCard, lockBoard] = [false, false];
    [firstCard, secondCard] = [null, null];
  }
  
  // to shuffle all the cards
  (function shuffle() {
    cards.forEach(card => {
      let ramdomPos = Math.floor(Math.random() * 12);
      card.style.order = ramdomPos;
    });
  })();
  
  
  cards.forEach(card=> card.addEventListener('click', flipCard));
  
  // to restart the game
  document.getElementById("button").addEventListener("click", function() {
    location.reload();
  });
  