ironhack-labs · vladys00 · Oct 9, 2024 · Oct 9, 2024
diff --git a/index.html b/index.html
@@ -6,18 +6,25 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Superhero Memory Game</title>
     <!-- LINK THE STYLES HERE -->
+     <link rel="stylesheet" href="styles/style.css  ">
   </head>
   <body>
     <div>
       <h1>Superhero Memory Game</h1>
     </div>
+
     <div id="score">
       <h2>Score</h2>
       <p>Pairs clicked: <span id="pairs-clicked">0</span></p>
       <p>Pairs guessed: <span id="pairs-guessed">0</span></p>
     </div>
+
+
     <div id="memory-board"></div>
 
+
+    <script src="src/memory.js"></script>
+   <script src="src/index.js"></script>
     <!-- LINK THE JAVASCRIPT FILES HERE (keep in mind that the order in which you link them MATTERS) -->
   </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -27,6 +27,8 @@ const cards = [
 
 const memoryGame = new MemoryGame(cards);
 
+//memoryGame.shuffleCards();
+
 window.addEventListener('load', (event) => {
   let html = '';
   memoryGame.cards.forEach((pic) => {
@@ -41,10 +43,40 @@ window.addEventListener('load', (event) => {
   // Add all the divs to the HTML
   document.querySelector('#memory-board').innerHTML = html;
 
+
   // Bind the click event of each element to a function
   document.querySelectorAll('.card').forEach((card) => {
     card.addEventListener('click', () => {
-      // TODO: write some code here
+      memoryGame.pickedCards.push(card);
+
+      card.classList.add("turned");
+
+
+    console.log(memoryGame.pickedCards)
+
+    if (memoryGame.pickedCards.length === 2){
+
+
+      const card1 = memoryGame.pickedCards[0].getAttribute("data-card-name");
+      const card2 = memoryGame.pickedCards[1].getAttribute("data-card-name");
+      if (memoryGame.checkIfPair(card1,card2)){
+
+        memoryGame.pickedCards = [];
+      } else {
+        setTimeout(()=>{
+          memoryGame.pickedCards.forEach(card => card.classList.remove("turned"));
+          memoryGame.pickedCards = [];
+
+        },1000)
+      }
+
+    }
+    document.getElementById("pairs-clicked").innerHTML = memoryGame.pairsClicked;
+    document.getElementById("pairs-guessed").innerHTML = memoryGame.pairsGuessed;
+
+    if (memoryGame.checkIfFinished()){
+      console.log("you won!!!")
+    }
       console.log(`Card clicked: ${card}`);
     });
   });

diff --git a/src/memory.js b/src/memory.js
@@ -1,18 +1,42 @@
 class MemoryGame {
   constructor(cards) {
     this.cards = cards;
+    this.pickedCards = [];
+    this.pairsClicked = 0;
+    this.pairsGuessed = 0;
+
     // add the rest of the class properties here
   }
 
   shuffleCards() {
+    if (!this.cards) return undefined;
+    for (let i = this.cards.length - 1; i > 0; i--) {
+      const randomIndex = Math.floor(Math.random() * (i + 1));
+      [this.cards[i], this.cards[randomIndex]] = [this.cards[randomIndex], this.cards[i]];
+    }
     // ... write your code here
   }
 
   checkIfPair(card1, card2) {
-    // ... write your code here
+    this.pairsClicked += 1;
+    if (card1 === card2){
+      this.pairsGuessed += 1;
+
+      return true;
+    } else {
+
+      return false;
+    }
   }
 
+
+
   checkIfFinished() {
-    // ... write your code here
+    if (this.cards.length / 2 === this.pairsGuessed){
+      return true;
+    } else if (this.cards.length !== this.pairsGuessed){
+      return false;
+    }
+
   }
 }