ironhack-labs · sergotero · Nov 1, 2025
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
     <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>
@@ -16,8 +17,12 @@ <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>
+    <div id="memory-board">
+
+    </div>
 
     <!-- LINK THE JAVASCRIPT FILES HERE (keep in mind that the order in which you link them MATTERS) -->
   </body>
+  <script src="src/memory.js"></script>
+  <script src="src/index.js"></script>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -26,8 +26,18 @@ const cards = [
 ];
 
 const memoryGame = new MemoryGame(cards);
+const pairsClicked = document.getElementById("pairs-clicked");
+const pairsGuessed = document.getElementById("pairs-guessed");
 
 window.addEventListener('load', (event) => {
+
+  //Shuffle
+  console.log("Cards pre-shuffle:", memoryGame.cards);
+
+  memoryGame.shuffleCards();
+
+  console.log("Cards post-shuffle:", memoryGame.cards);
+
   let html = '';
   memoryGame.cards.forEach((pic) => {
     html += `
@@ -44,8 +54,51 @@ window.addEventListener('load', (event) => {
   // Bind the click event of each element to a function
   document.querySelectorAll('.card').forEach((card) => {
     card.addEventListener('click', () => {
-      // TODO: write some code here
-      console.log(`Card clicked: ${card}`);
+
+      //Toggle styles
+      card.classList.toggle("turned");
+
+      //Add clicked card to array
+      memoryGame.pickedCards.push(card);
+
+      //Check the array
+      if (memoryGame.pickedCards.length === 2) {
+        const card1 = memoryGame.pickedCards[0];
+        const card2 = memoryGame.pickedCards[1];
+        pairsClicked.textContent = memoryGame.pairsClicked;
+
+        //Check pair
+        if (memoryGame.checkIfPair(card1.dataset.cardName, card2.dataset.cardName)) {
+          //Update counter
+          pairsGuessed.textContent = memoryGame.pairsGuessed;
+
+          //Check if finished
+          if (memoryGame.checkIfFinished()) {
+            setTimeout(() => {
+              alert("You've won!");
+              const restart = confirm("Do you want to try again?");
+              if(restart){
+                window.location.reload();
+              }
+            })
+          }
+
+        } else {
+
+          //Toggle styles after 1s
+          setTimeout(() => {
+            card1.classList.toggle("turned");
+            card2.classList.toggle("turned");
+          }, 1000);
+        }
+
+        //Set array to []
+        memoryGame.pickedCards = [];
+      }
+
     });
   });
 });
+
+
+// document.querySelectorAll(".card").forEach((card) => card.classList.toggle("turned"));
diff --git a/src/memory.js b/src/memory.js
@@ -1,18 +1,49 @@
 class MemoryGame {
   constructor(cards) {
     this.cards = cards;
-    // add the rest of the class properties here
+    this.pickedCards = [];
+    this.pairsClicked = 0;
+    this.pairsGuessed = 0;
   }
 
   shuffleCards() {
-    // ... write your code here
+    const deck = this.cards.slice();
+    let length = this.cards.length;
+    for (let i = deck.length -1; i > 1; i--) {
+      //Get random number
+      const random = Math.floor(Math.random() * length);
+      //Get last card
+      const card = deck[i];
+      //Get random card
+      const randomCard = deck[random];
+
+      //Swap places
+      deck[deck.indexOf(card)] = randomCard;
+      deck[random] = card;
+
+      //console.log("=========");
+      //console.log("Vuelta: ", i);
+      //console.log("Card: ", card, " - ", this.cards.indexOf(card));
+      //console.log("RandomCard: ", randomCard, " - ", this.cards.indexOf(randomCard));
+
+      length--;
+    }
+    this.cards = deck;
   }
 
   checkIfPair(card1, card2) {
-    // ... write your code here
+    if (card1 === card2) {
+      this.pairsClicked++;
+      this.pairsGuessed++;
+      return true;
+    } else {
+      this.pairsClicked++;
+      return false;
+    }
+
   }
 
   checkIfFinished() {
-    // ... write your code here
+    return this.pairsGuessed === (this.cards.length / 2);
   }
 }
diff --git a/styles/style.css b/styles/style.css
@@ -23,7 +23,7 @@ body {
   position: relative;
 }
 
-.card.turned {
+.blocked {
   pointer-events: none;
 }
 
@@ -34,8 +34,7 @@ body {
   transform: rotateY(180deg);
 }
 
-.card .back,
-.card .front {
+.card .back,.card .front {
   width: 71px;
   height: 71px;
   margin: 10px;