Welcome to CODEBOX! (Copy 1313)

✨ นายดรณ์ นุตเวช

<title>Memory Game</title>

body {
  height: 80vh;
  display: flex;
  background: #060AB2;
}
h1 {
  position: absolute;
  top: 20px;
  right: 40%;
  width: 200px;
  height: 100px;
}
h2 {
  position: absolute;
  top: 70px;
  right: 35%;
  width: 200px;
  height: 100px;
}

.memory-game {
  width: 600px;
  height: 380px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  perspective: 1000px;
}

.memory-card {
  width: calc(25% - 10px);
  height: calc(33.333% - 10px);
  margin: 5px;
  position: relative;
  transform: scale(1);
  transform-style: preserve-3d;
  transition: transform .5s;
  box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

.memory-card:active {
  transform: scale(0.97);
  transition: transform .2s;
}

.memory-card.flip {
  transform: rotateY(180deg);
}

.front-face,
.back-face {
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  border-radius: 5px;
  background: #1C7CCC;
  backface-visibility: hidden;
}

.front-face {
  transform: rotateY(180deg);
}</style>
  
  <h1>Team P'Getty </h1>
  <h2>Group C </h2>
  <section class="memory-game">
    
    <div class="memory-card" data-framework="aurelia">
      <img class="front-face" src="https://cdn.discordapp.com/attachments/801364667397963816/806805178240991232/mars.png" alt="Aurelia" />
      <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" />
    </div>
    <div class="memory-card" data-framework="aurelia">
      <img class="front-face" src="https://cdn.discordapp.com/attachments/801364667397963816/806805178240991232/mars.png" alt="Aurelia" />
      <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" />
    </div>

<div class="memory-card" data-framework="react">
      <img class="front-face" src="https://cdn.discordapp.com/attachments/801364667397963816/806805186076082206/moon.png" alt="React" />
      <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" />
    </div>
    <div class="memory-card" data-framework="react">
      <img class="front-face" src="https://cdn.discordapp.com/attachments/801364667397963816/806805186076082206/moon.png" alt="React" />
      <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" />
    </div>
    <div class="memory-card" data-framework="monkey">
      <img class="front-face" src="https://cdn.discordapp.com/attachments/801364667397963816/806805180770549760/monkey.png" alt="React" />
      <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" />
    </div>
    <div class="memory-card" data-framework="monkey">
      <img class="front-face" src="https://cdn.discordapp.com/attachments/801364667397963816/806805180770549760/monkey.png" alt="React" />
      <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" />
    </div>
    <div class="memory-card" data-framework="sun">
      <img class="front-face" src="https://media.discordapp.net/attachments/801364667397963816/806805188705910794/sun.png" alt="React" />
      <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" />
    </div>
    <div class="memory-card" data-framework="sun">
      <img class="front-face" src="https://media.discordapp.net/attachments/801364667397963816/806805188705910794/sun.png" alt="React" />
      <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" />
    </div>
  </section>
  <script>
  const cards = document.querySelectorAll('.memory-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;
  checkForMatch();
}

function checkForMatch() {
  let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;

isMatch ? disableCards() : unflipCards();
}

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));
  </script>
  
</body>
</html>