Welcome to CODEBOX! (Branch 1224)

✨ นายเมษา มานิตสกุลวงศ์

<html lang="en">
<head>
  <meta charset="UTF-8">
  
  <div style="padding:20px;">
  <p style="font-size: 50; font-weight: bold; color:    pink;"> Time Remain <span id="countdowntimer"       style="font-size: 50; font-weight: bold; color:       red;">40 </span> second</p>
  </div>
  <link rel="stylesheet" href="styles.css"><br>
  <h1 id="testcount" style="margin-left:20px; padding-top:130px; position:absolute;">Score : 0</h1>
  <a href="https://marina-ferreira.github.io/projects/js/memory-game/" class="credit">Credit</a>
</head>
<body>
  <style>
    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  color:white;
}

body {
  height: 100vh;
  display: flex;
  background: url(https://images.unsplash.com/photo-1551244072-5d12893278ab?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1778&q=80);
}

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

.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%;
  position: absolute;
  border-radius: 15px;
  background: #1C7CCC;
  backface-visibility: hidden;
}

.front-face {
  transform: rotateY(180deg);
}

h1{
  font-size:30px;
}

p{
  font-size:30px;
}

.restartbtn{
  display:none;
  position: absolute;
  top:25%;
  left:8%;
  width:300px;
  height:200px;
  font-size:66px;
  border-radius:25px;
}

.gameovertxt{
  display:none;
  position: relative;
  top:10%;
  left:0%;
  font-size:66px;
  font-weight:bold;
}

#restart{
  background-color:red;
  width:55%;
  height:15%;
}
#restart:hover{
  background-color:lightgreen;
  transition:background-color 2s;
}
.credit{
  color:black;
  font-size:24px;
  height:8%;
  padding:20px;
  border-radius: 20px;
  background-color:lightgreen;
  position:absolute;
  text-decoration:none;
  margin-top:200px;
  margin-left:20px;
}
  </style>
  <section class="memory-game">
    <div id="gameover" class="gameovertxt">GAMEOVER</div>
    <div id="congrat" class="gameovertxt">Congratulation</div>
    
    <div><button type="button" id="restart" onclick="restart()" onclick="showbtn()" class="restartbtn">Play again</button></div>
    <div id="card" class="memory-card" data-framework="aurelia">
      <img class="front-face" src="https://cdn.discordapp.com/attachments/798210377618948117/806502249127346216/octopus.svg" alt="Aurelia" />
      <img class="back-face" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="JS Badge" />
    </div>
    <div id="card" class="memory-card" data-framework="aurelia">
      <img class="front-face" src="https://cdn.discordapp.com/attachments/798210377618948117/806502249127346216/octopus.svg" alt="Aurelia" />
      <img class="back-face" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="JS Badge" />
    </div>

<div id="card" class="memory-card" data-framework="react">
      <img class="front-face" src="https://cdn.discordapp.com/attachments/798210377618948117/806503869194567690/turtle.svg" alt="React" />
      <img class="back-face" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="JS Badge" />
    </div>
    <div id="card" class="memory-card" data-framework="react">
      <img class="front-face" src="https://cdn.discordapp.com/attachments/798210377618948117/806503869194567690/turtle.svg" alt="React" />
      <img class="back-face" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="JS Badge" />
    </div>
  </section>
  <script>
    const cards = document.querySelectorAll('.memory-card');
var pair = 0;
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);
  pair = pair + 1;
  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));

cards.forEach(card => card.addEventListener('click', time()));

function counter(){
  document.getElementById("testcount").innerHTML="Score: "+pair;
}

function restart(){
  location.reload(true);
}

</script>
</body>
</html>