JSFiddle - React, Tailwind, and code Playground

by amirrahman132132

HTML

<div class="wrapper" style="width: 600px;margin:auto;">
        <div class="root">
            <div class="each" style="width: 24%;height:150px;"><img class="w-full h-full" draggable="false" src="" /></div>            
        </div>
        <div class="text"></div>
    </div>

CSS

.each img{
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: all 0.6s ease;
}
.show img {
    opacity: 1 !important;
}
.each {transform: rotateY(180deg);transition:all 0.6s ease;}
.show {transform: rotateY(0deg) !important}
.root {display:flex;flex-wrap: wrap;}
.each {background: blue; border:1px solid white;}
.text {font-size: 1.5em; text-align: center;font-weight: bold; text-transform: uppercase;}

JavaScript

var root = document.querySelector(".root"),
  eachTemplate = root.querySelector(".each").cloneNode(true),
  boxCount = 12,
  score = 0,
  images = [],
  clickedItems = [],
  boxes = []

images.push({
  url: "https://i.ibb.co/K6RFgC7/TB1-bms-MVXXXXb-DXFXXXXXXXXXX-0-item-pic.jpg"
})
images.push({
  url: "https://i.ibb.co/nQPydpp/13c43a93bd3cf6cb84c124f903ff7deb.jpg"
})
images.push({
  url: "https://i.ibb.co/6vT7zTF/59830973-fresh-red-apple-with-leaf-isolated-on-white.jpg"
})
images.push({
  url: "https://i.ibb.co/m4s0RRC/dc95a0a2ecce80de1ddddf6786231d3d.jpg"
})
images.push({
  url: "https://i.ibb.co/vCNvxWs/depositphotos-116702810-stock-illustration-single-banana-fruit-close-up.jpg"
})
images.push({
  url: "https://i.ibb.co/PDTVjXv/Perfectly-retouched-half-of-the-orange-with-slice-and-leaves-isolated-on-white-background-with-clipp.jpg"
})

for (let c = 0; c < boxCount; c++) {
  boxes.push(images[c % images.length])
} // creating array from boxCount with images object inside

function shuffle(array) {
  let currentIndex = array.length,
    randomIndex;
  while (currentIndex != 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]
    ];
  }
  return array;
}

function renderBoxes(arr) {
  root.innerHTML = ""
  arr.forEach((each, i) => {
    var newEl = eachTemplate.cloneNode(true)
    newEl.ref = each // attaching image object reference to each element
    newEl.querySelector("img").src = each.url
    root.appendChild(newEl)
  })
}

function game(match, failed, win) {
  renderBoxes(shuffle(boxes)) // shuffling array then passing it to render function
  root.querySelectorAll(".each").forEach(each => {
    each.onclick = function() {
      if (each.classList.contains("show")) {
        return true
      } // stop function if clicked on solved or same element

      clickedItems.push(each)
      each.classList.add("show")

      if...