the cards are showing perfectly fine on the Webpage but when I click on them, they should flipped over since I have done the functions for them in JS but it is not working.
MY HTML code are here
<!DOCTYPE html>
<html lang="en">
<head>
<title class="page-title">Memory Game</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<h1>Memory Card-Game</h1>
<div class="card-container">
<div class="card">
<img class="front-card" src="gorilla" alt="Image 1">
<img class="back-card" src="badge.jpg">
<div class="card-content"></div>
</div>
<div class="card">
<img class="front-card" src="fish" alt="Image 2">
<img class="back-card" src="badge.jpg">
<div class="card-content"></div>
</div>
<div class="card">
<img class="front-card" src="tiger.jpg" alt="Image 3">
<img class="back-card" src="badge.jpg">
<div class="card-content"></div>
</div>
<div class="card">
<img class="front-card" src="tiger.jpg" alt="Image 3">
<img class="back-card" src="badge.jpg">
<div class="card-content"></div>
</div>
<div class="card">
<img class="front-card" src="monkey.jpg" alt="Image 3">
<img class="back-card" src="badge.jpg">
<div class="card-content"></div>
</div>
<div class="card">
<img class="front-card" src="gorilla.jpg" alt="Image 3">
<img class="back-card" src="badge.jpg">
<div class="card-content"></div>
</div>
<div class="card">
<img class="front-card" src="monkey" alt="Image 3">
<img class="back-card" src="badge.jpg">
<div class="card-content"></div>
</div>
<div class="card">
<img class="front-card" src="spider.jpg" alt="Image 3">
<img class="back-card" src="badge.jpg">
<div class="card-content"></div>
</div>
<div class="card">
<img class="front-card" src="cow.jpg" alt="Image 3">
<img class="back-card" src="badge.jpg">
<div class="card-content"></div>
</div>
<div class="card">
<img class="front-card" src="fish.jpg" alt="Image 3">
<img class="back-card" src="badge.jpg">
<div class="card-content"></div>
</div>
<div class="card">
<img class="front-card" src="spider" alt="Image 3">
<img class="back-card" src="badge.jpg">
<div class="card-content"></div>
</div>
<div class="card">
<img class="front-card" src="cow.jpg" alt="Image 3">
<img class="back-card" src="badge.jpg">
<div class="card-content"></div>
</div>
</div>
</body>
</html>
What I have tried:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
background: #060AB2;
}
h1 {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
text-align: center;
color: white;
}
.card-container {
display: flex;
flex-wrap: wrap;
width: 640px;
height: 640px;
margin: auto;
display: flex;
flex-wrap: wrap;
perspective: 1000px;
}
.card.flip {
transform: rotateY(180deg);
}
.card {
width: calc(25% - 10px);
height: calc(33.333% - 10px);
margin: 5px;
border-radius: 5px;
box-shadow: 1px 1px 1px gray rgba(0,0,0,.3);
overflow: hidden;
position: relative;
transform: scale(1);
transform-style: preserve-3d;
transition: transform .5s;
}
.card:active {
transform: scale(0.97);
transition: transform .2s;
}
.card img {
width: 100%;
height: 100%;
}
.card-content {
font-size: 18px;
padding: 10px;
text-align: justify;
}
.front-card,
.back-card {
width: 100%;
height: 100%;
padding: 10px;
position: absolute;
border-radius: 5px;
background: #1C7CCC;
backface-visibility: hidden;
}
.front-card {
transform: rotateY(180deg);
}
const cards = document.querySelectorAll('.card');
let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
function flipCard(){
if (lockBoard) return;
if (this === firstCard) return;
this.classList.add('flip')
if(!hasFlippedCard) {
hasFlippedCard = true;
firstCard = this;
return;
}
secondCard = this;
this.addEventListener("transitioned", checkForMatch);
}
function checkForMatch(){
this.removeEventListener("transitioned", checkForMatch);
let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
isMatch ? disableCards() : unflipped();
}
function disableCards(){
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetBoard();
}
function unflipCards(){
lockBoard = true;
setTimeout(()=> {
firstCard.classList.remove('flip');
secondCard.classList.remove('flip');
resetBoard();
}, 1500);
}
function resetBoard(){
[hasFlippedCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}
(function shuffle(){
cards.forEach(card => {
let randomPos = Math.floor(Math.random() * 12);
card.style.order = randomPos;
});
})();
cards.forEach(card => card.addEventListener('click' , flipCard));