JSFiddle - React, Tailwind, and code Playground

by tomik23

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Flip/1.1.2/jquery.flip.min.js"></script>
<div id="card1" class="card">
  <div class="front">
    <img src="https://fakeimg.pl/100/">
  </div>
  <div class="back">
    <img src="https://fakeimg.pl/100/">
  </div>
</div>

<div id="card2" class="card">
  <div class="front">
    <img src="https://fakeimg.pl/100/">
  </div>
  <div class="back">
    <img src="https://fakeimg.pl/100/">
  </div>
</div>

<div id="card3" class="card">
  <div class="front">
    <img src="https://fakeimg.pl/100/">
  </div>
  <div class="back">
    <img src="https://fakeimg.pl/100/">
  </div>
</div>

<div id="card4" class="card winner">
  <div class="front">
    <img src="https://fakeimg.pl/100/">
  </div>
  <div class="back">
    <img src="https://fakeimg.pl/100/">
  </div>
</div>

<div id="card5" class="card winner">
  <div class="front">
    <img src="https://fakeimg.pl/100/">
  </div>
  <div class="back">
    <img src="https://fakeimg.pl/100/">
  </div>
</div>

<div id="hidden-text" class="hidden">
  <h2> hidden content</h2>
</div>

CSS

body {
  margin: 0 100px;
}

.card {
  width: 100px;
  height: 100px;
  margin: 20px;
  display: inline-block;
}

.front,
.back {
  border: 2px gray solid;
  padding: 10px;
}

.front {
  background-color: #ccc;
}

.back {
  background-color: red;
}

.winner-border .back {
  background-color: blue;
}

.hidden {
  display: none;
}

JavaScript

$(function () {
  const cards = document.querySelectorAll('.card');
  cards.forEach(card => {
    $(`.${card.className}`).flip({ trigger: 'manual' })
    card.addEventListener('click', function () {
      $(this).flip(true);
      $(this).toggleClass('card-flip')
      let checkFive = document.querySelectorAll('.card-flip');
      if (checkFive.length >= 5) {
        const hiddenText = document.querySelector('#hidden-text'); hiddenText.removeAttribute('class')
        const winners = document.querySelectorAll('.winner');
        console.log(winners)
        winners.forEach(winner => {
          winner.classList.add('winner-border');
        })
      }
    })
  })
})