flip back both cards when both are flipped

by ShaCP

HTML

<div>

</div>
<div>

</div>

CSS

div {
width: 100px;
height: 100px;
background-color: blue;
margin: 1em;
transition: 1s transform linear;
}

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

JavaScript

/* code related to sounds */

const soundEffect = new Audio(
  "https://freesound.org/data/previews/51/51702_113976-lq.mp3"
);

function enableSoundOnIOS() {
  soundEffect.play().then(() => soundEffect.pause());
  document.body.removeEventListener("click", enableSoundOnIOS);
}

document.body.addEventListener("click", enableSoundOnIOS);

window.addEventListener("transitionstart", (e) => {
  soundEffect.currentTime = 0;
  soundEffect.play();
});

/* end code related to sounds */

var elements = [...document.querySelectorAll("div")];

/* setTimeout(() => {
elements.forEach((e) => {
e.classList.add("rotate")
})
}, 500); */

var flippedCount = 0;

window.addEventListener("click", (e) => {
  if (e.target.localName !== "div") {
    return;
  }

  e.target.classList.toggle("rotate");

  setTimeout(() => {
    setTimeout(() => {
      console.log("setTimeout callback");
    });
  });
});

window.addEventListener("transitionend", (e) => {
  console.log(e.type);
  flippedCount++;

  if (flippedCount !== 2) {
    return;
  }

  flippedCount = 0;
  setTimeout(() => {
    elements.forEach((e) => {
      e.classList.remove("rotate");
    });
  }, 0);
});

window.addEventListener("transitionstart", (e) => console.log(e.type));