JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<p id="demo"></p>
<p id="demozf1"></p>
<p id="demozf2"></p>
<p id="demo2"></p>

<div id="demoOutput"></div>

CSS

body {
  background: #1f2227;
}

#demoOutput {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card-container {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  border-radius: 10px;
  position: relative;
  transition: all 0.5s;
  transform-style: preserve-3d;
  perspective: 500px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  transform-origin: center;
  transition: all 0.5s;
}

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

.card-container .card-face {
  position: absolute;
  border-radius: 10px;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}

.card-container .front {
  background: #273469;
}

.card-container .back {
  background: #273469;
  transform: rotateY(180deg);
}

JavaScript

const demoOutput = document.getElementById("demoOutput");
let firstCardClick, secondCardClick = "";

const allMemoryIcons =  ["smiley",  "hand",  "fuchs",  "fisch",  "schnecke",  "blume",  "baum",  "mond",  "sonne",  "saturn",  "melone",  "brokkoli",  "kuchen",  "bonbon",  "ball",  "pingpong",  "handschuh",  "auto",  "fahrrad",  "roller",  "kanu",  "ballon",  "schleife",  "game",  "brille",  "schuh",  "trompete",  "telefon",  "stift",  "tasche",  "axt",  "bombe",  "magnet",  "herz",  "glocke"];
let memoryIcons = [];

function createMemoryIconsArray(gamelength) {
	memoryIcons = allMemoryIcons.splice(gamelength);
	memoryIcons = memoryIcons.concat(memoryIcons, memoryIcons);
}

function shuffle(array) {
  let currentIndex = array.length, randomIndex;

  // While there remain elements to shuffle.
  while (currentIndex != 0) {

    // Pick a remaining element.
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    // And swap it with the current element.
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]];
  }

  return array;
}

function createGameBoard() {
for (let i in memoryIcons) {
			const cardContainer = document.createElement("div");
				cardContainer.dataset.icon = memoryIcons[i];
				cardContainer.className = "card-container";
			const cardFaceFront = document.createElement("div");
				cardFaceFront.className = "card-face front";
			const cardFaceBack = document.createElement("div");
				cardFaceBack.className = "card-face back";
				cardFaceBack.textContent = memoryIcons[i];
			cardContainer.append(cardFaceFront, cardFaceBack);
			demoOutput.appendChild(cardContainer);
	}
}

function onCardToggleClick(e){
	
	if (!firstCardClick) {
		firstCardClick = e.target.parentNode;
		firstCardClick.classList.add("rotateY");
		firstCardClick.style.pointerEvents = "none"
	} else if (firstCardClick && !secondCardClick) {
		secondCardClick =...