Skip to content
Advertisement

Flip Card HTML: Wont flip or stay flip when I click

I’m making flip card game, but the photo won’t stay opened when I click on it. I’ve listed down what needs to be done in the JS, but can’t seem to wrap my head around how I can implement them to my HTML file. The photos are supposed to appear randomly (like typical flipcard games), but when I try to add some other functions on the JS file, suddenly the random function that previously worked, no longer works.

Also, I’m supposed to use .card.open for the photo to stay open when I click them. But when I add this function to my CSS file, click function no longer works.

I referred to this tutorial since this is exactly how I want my code to turn out to be but nothing seems to be working.

Codepen is here: https://codepen.io/siapanamasaya/pen/GRqwdQE

let cards = document.getElementsByClassName("card");
if (cards !== 0) {
  let card_array = [];
  for (let i = 0; i < cards.length; i++) {
    card_array.push(i);
  }

  for (let i = 0; i < cards.length; i++) {
    let j = Math.floor(Math.random() * card_array.length);
    let card = cards.item(card_array[j]);
    card.parentNode.appendChild(card);
    card_array.splice(j, 1);
  }
}

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];
}
body {
  background-color: gray;
}

.card {
  width: 180px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transition: 1s;
  margin: 5px;
}

.card-front,
.card-back {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  position: absolute;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.card-back {
  background-color: orange;
}

img {
  width: 170px;
  height: 190px;
  padding: 5px;
  border-radius: 8px;
}

.card-front {
  background-color: white;
  transform: rotateY(180deg);
}


/*will be removed once .card.open works*/

.card:active {
  transform: rotateY(180deg);
}

.card-container {
  display: flex;
  flex-wrap: wrap;
}
<div class="card-container">
  <div class="card" data-framework="one">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_01.jpg" alt = "">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
    </div>
  </div>
  <div class="card" data-framework="two">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_02.jpg" alt = "">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
    </div>
  </div>
  <div class="card" data-framework="three">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_03.jpg" alt = "">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
    </div>
  </div>
  <div class="card" data-framework="four">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_04.jpg" alt = "">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
    </div>
  </div>
  <div class="card" data-framework="five">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_05.jpg" alt = "">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
    </div>
  </div>
  <div class="card" data-framework="six">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_06.jpg" alt = "">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
    </div>
  </div>
  <div class="card" data-framework="seven">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_07.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="eight">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_08.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="nine">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_09.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="ten">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_10.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="eleven">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_11.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="twelve">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_12.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="thirteen">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_13.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="fourteen">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_14.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="fifteen">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_15.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="sixteen">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_16.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="seventeen">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_17.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="eighteen">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_18.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="nineteen">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_19.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="one">
<div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_01.jpg" alt = "">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
    </div>
  </div>
  <div class="card" data-framework="two">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_02.jpg" alt = "">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
    </div>
  </div>
  <div class="card" data-framework="three">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_03.jpg" alt = "">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
    </div>
  </div>
  <div class="card" data-framework="four">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_04.jpg" alt = "">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
    </div>
  </div>
  <div class="card" data-framework="five">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_05.jpg" alt = "">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
    </div>
  </div>
  <div class="card" data-framework="six">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_06.jpg" alt = "">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
    </div>
  </div>
  <div class="card" data-framework="seven">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_07.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="eight">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_08.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="nine">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_09.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="ten">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_10.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="eleven">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_11.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="twelve">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_12.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="thirteen">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_13.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="fourteen">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_14.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="fifteen">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_15.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="sixteen">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_16.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="seventeen">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_17.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="eighteen">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_18.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
  <div class="card" data-framework="nineteen">
<div class="card-front">
  <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_19.jpg" alt = "">
</div>
<div class="card-back">
  <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg">
</div>
  </div>
</div>

Advertisement

Answer

instead of .card:active use this css

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

and add javascript code to your code

var flip = function() {
  this.classList.toggle("flip")
};

for (var i = 0; i < cards.length; i++) {
  cards[i].addEventListener('click', flip, false);
}

codeopen

User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement