text: document.addEventListener('DOMContentLoaded', () => {
  
      //card options
      const cardArr = [
          {
              name: 'fries',
              img: 'images/fries.png'
          },
          {
              name: 'cheeseburger',
              img: 'images/cheeseburger.png'
          },
          {
              name: 'hotdog',
              img: 'images/hotdog.png'
          },
          {
              name: 'ice-cream',
              img: 'images/ice-cream.png'
          },
          {
              name: 'milkshake',
              img: 'images/milkshake.png'
          },
          {
              name: 'pizza',
              img: 'images/pizza.png'
          },
          {
              name: 'fries',
              img: 'images/fries.png'
          },
          {
              name: 'cheeseburger',
              img: 'images/cheeseburger.png'
          },
          {
              name: 'hotdog',
              img: 'images/hotdog.png'
          },
          {
              name: 'ice-cream',
              img: 'images/ice-cream.png'
          },
          {
              name: 'milkshake',
              img: 'images/milkshake.png'
          },
          {
              name: 'pizza',
              img: 'images/pizza.png'
          }
      ]
      cardArr.sort(() => 0.5 - Math.random())
  
      const grid = document.querySelector('.grid');
      const resultDisplay = document.querySelector('#result');
      var cardsChosen = [];
      var cardsChosenId = []; 
      var cardsWon = [];
  
      // Create your Board
      function createBoard() {
          for(let i = 0; i < cardArr.length; i++) {
              var card = document.createElement('img')
              card.setAttribute('src', 'images/blank.png')
              card.setAttribute('data-id', i)
              card.addEventListener('click', flipCard)
              grid.appendChild(card)  
          }
      }
  
     // check for matches
  
     function checkForMatch() {
         var cards = document.querySelectorAll('img')
         const optionOneId = cardsChosenId[0]
         const optionTwoId = cardsChosenId[1]
  
         if(optionOneId == optionTwoId) {
             cards[optionOneId].setAttribute('src', 'images/blank.png')
             cards[optionTwoId].setAttribute('src', 'images/blank.png')
             alert('You have clicked on the same image!')
         }
         else if (cardsChosen[0] === cardsChosen[1]) {
             alert('You Found the Match')
             cards[optionOneId].setAttribute('src', 'images/white.png')
             cards[optionTwoId].setAttribute('src', 'images/white.png')
             cards[optionOneId].removeEventListener('click', flipCard)
             cards[optionTwoId].removeEventListener('click', flipCard)
             cardsWon.push(cardsChosen)
         } else {
             cards[optionOneId].setAttribute('src', 'images/blank.png')
             cards[optionTwoId].setAttribute('src', 'images/blank.png')
             alert('Sorry, try again')
         }
         cardsChosen = []
         cardsChosenId = []
         resultDisplay.textContent = cardsWon.length
         if(cardsWon.length === cardArr.length/2) {
             resultDisplay.textContent = 'Congratulations! You found them all!'
         }
     }
  
     // flip your card
  
     function flipCard() {
         var cardId = this.getAttribute('data-id')
         cardsChosen.push(cardArr[cardId].name)
         cardsChosenId.push(cardId)
         this.setAttribute('src', cardArr[cardId].img)
         if(cardsChosen.length == 2) {
             setTimeout(checkForMatch, 500)
         }
         
     }
     
     createBoard()
  })