kottans · igarok88 · Oct 13, 2022
diff --git a/submissions/igarok88/memory–pair-game/index.html b/submissions/igarok88/memory–pair-game/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <link rel="stylesheet" href="style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Memory – Pair Game</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="game__container"></div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/submissions/igarok88/memory–pair-game/script.js b/submissions/igarok88/memory–pair-game/script.js
@@ -0,0 +1,86 @@
+(function () {
+  function fruitCards() {
+    function Shuffle(o) {
+      for (
+        var j, x, i = o.length;
+        i;
+        j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x
+      );
+      return o;
+    }
+    const shuffleArr = Shuffle([1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6]);
+
+    const gameContainer = document.querySelector(".game__container");
+    gameContainer.innerHTML = "";
+
+    shuffleArr.forEach((item) => {
+      const gameСard = `
+      <div class="game__card-container flip-container" data-value='${item}'>
+        <div class="flipper">
+          <div class="game__item front"></div>
+          <div class="game__item back">
+            <img class='game__img' src="img/${item}.jpg"  alt="${item}" />  
+          </div>
+        </div>
+      </div>
+    `;
+      gameContainer.innerHTML += gameСard;
+    });
+
+    let gameCards = document.querySelectorAll(".game__card-container");
+
+    let selectedCards = [];
+    let timeout;
+
+    const openCards = function (e) {
+      if (e.target.closest(".game__card-container")) {
+        const currentCard = e.target.closest(".game__card-container");
+        currentCard.classList.add("selected");
+        selectedCards.push(currentCard.getAttribute("data-value"));
+      }
+
+      if (selectedCards.length > 1 && selectedCards[0] === selectedCards[1]) {
+        gameCards.forEach((item) => {
+          if (item.getAttribute("data-value") === selectedCards[0]) {
+            timeout = setTimeout(() => {
+              item.replaceWith(document.createElement("div"));
+
+              if (isFinishGame()) {
+                alert("Congratulation. You Win!");
+                fruitCards();
+              }
+            }, 1200);
+          }
+        });
+
+        selectedCards = [];
+      }
+
+      if (selectedCards.length > 1 && selectedCards[0] !== selectedCards[1]) {
+        gameContainer.removeEventListener("click", openCards);
+
+        selectedCards = [];
+
+        timeout = setTimeout(closeCards, 800);
+      }
+    };
+
+    function isFinishGame() {
+      gameCards = document.querySelectorAll(".game__card-container");
+      if (gameCards.length === 0) {
+        return true;
+      }
+      return false;
+    }
+
+    function closeCards() {
+      gameCards.forEach((item) => {
+        item.classList.remove("selected");
+      });
+      clearTimeout(timeout);
+      gameContainer.addEventListener("click", openCards);
+    }
+    gameContainer.addEventListener("click", openCards);
+  }
+  fruitCards();
+})();
diff --git a/submissions/igarok88/memory–pair-game/style.css b/submissions/igarok88/memory–pair-game/style.css
@@ -0,0 +1,64 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: Arial;
+}
+body {
+  background-color: rgb(184, 193, 248);
+}
+.container {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.game__container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  width: 600px;
+}
+.game__card-container {
+  width: 150px;
+  height: 150px;
+}
+.game__item {
+  border: 2px solid black;
+  width: 150px;
+  height: 150px;
+  background-color: rgb(168, 236, 232);
+}
+
+.game__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.flip-container.selected .flipper {
+  transform: rotateY(180deg);
+}
+
+.flipper {
+  transition: 0.6s;
+  transform-style: preserve-3d;
+  position: relative;
+}
+
+.front,
+.back {
+  backface-visibility: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.front {
+  z-index: 2;
+  transform: rotateY(0deg);
+}
+
+.back {
+  transform: rotateY(180deg);
+}