Click here to Skip to main content
15,867,834 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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
HTML
<!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:

CSS
* {
  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);
}
JavaScript
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));
Posted
Updated 23-Jan-23 23:58pm
v3
Comments
Richard Deeming 24-Jan-23 6:03am    
Based on the code you've provided, your HTML file doesn't link to your Javascript file. Start by adding:
<script src="YourScriptFile.js"></script>

before the closing </body> tag (making sure you use the correct filename for your script file).

If it still doesn't work, use your browser's developer tools to check for error messages and debug your code.

1 solution

I haven't looked at your code, sorry. However there are many working examples out there.

CodePen is a fantastic resource for that type of thing. Here are some working examples that you could learn from: card flip - CodePen[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900