Memory Game

Live - https://memorygamebyraghav.netlify.app/

A retro grid-based game in vanilla JavaScript, HTML and CSS

For full description visit.
https://github.com/raghavkhanna30/Memorygame/blob/master/README.md

Script/code.

//create your board
function createBoard() {
for (let i = 0; i < cardArray.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 match function

// 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 the same image!')
}
else if (cardsChosen[0] === cardsChosen[1]) {
alert('You found a 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 === cardArray.length/2) {
resultDisplay.textContent = 'Congratulations! You found them all!'
}
}

Flipcard

//flip your card
function flipCard() {
var cardId = this.getAttribute('data-id')
cardsChosen.push(cardArray[cardId].name)
cardsChosenId.push(cardId)
this.setAttribute('src', cardArray[cardId].img)
if (cardsChosen.length ===2) {
setTimeout(checkForMatch, 500)
}
}

createBoard()
})

For full code you can visit
https://github.com/raghavkhanna30/Memorygame/blob/master/app.js