50 lines
954 B
JavaScript
50 lines
954 B
JavaScript
const cards = document.querySelectorAll('.memory-card');
|
|
|
|
let hasFlippedCard = false;
|
|
let lockBoard = false;
|
|
let firstCard, secondCard;
|
|
|
|
function flipCard() {
|
|
if (lockBoard) return;
|
|
|
|
this.classList.add('flip');
|
|
|
|
if (!hasFlippedCard) {
|
|
// first click
|
|
hasFlippedCard = true;
|
|
firstCard = this;
|
|
|
|
return;
|
|
}
|
|
|
|
// second click
|
|
hasFlippedCard = false;
|
|
secondCard = this;
|
|
|
|
checkForMatch();
|
|
}
|
|
|
|
function checkForMatch() {
|
|
let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
|
|
|
|
isMatch ? disableCards() : unflipCards();
|
|
}
|
|
|
|
function disableCards() {
|
|
firstCard.removeEventListener('click', flipCard);
|
|
secondCard.removeEventListener('click', flipCard);
|
|
}
|
|
|
|
function unflipCards() {
|
|
lockBoard = true;
|
|
|
|
setTimeout(() => {
|
|
firstCard.classList.remove('flip');
|
|
secondCard.classList.remove('flip');
|
|
|
|
lockBoard = false;
|
|
}, 1500);
|
|
}
|
|
|
|
cards.forEach(card => card.addEventListener('click', flipCard));
|