ironhack-labs · rafacruiz · Nov 3, 2025 · Nov 4, 2025 · Nov 4, 2025
diff --git a/SpecRunner.html b/SpecRunner.html
@@ -6,7 +6,7 @@
 
     <link rel="shortcut icon" type="image/png" href="jasmine/jasmine-2.8.0/jasmine_favicon.png" />
     <link rel="stylesheet" href="jasmine/jasmine-2.8.0/jasmine.css" />
-
+    
     <script src="jasmine/jasmine-2.8.0/jasmine.js"></script>
     <script src="jasmine/jasmine-2.8.0/jasmine-html.js"></script>
     <script src="jasmine/jasmine-2.8.0/boot.js"></script>

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>
@@ -19,5 +20,7 @@ <h2>Score</h2>
     <div id="memory-board"></div>
 
     <!-- LINK THE JAVASCRIPT FILES HERE (keep in mind that the order in which you link them MATTERS) -->
+     <script src="src/memory.js"></script>
+     <script src="src/index.js"></script>
   </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -26,10 +26,11 @@ const cards = [
 ];
 
 const memoryGame = new MemoryGame(cards);
+const cardsShusffle = memoryGame.shuffleCards(cards);
 
 window.addEventListener('load', (event) => {
   let html = '';
-  memoryGame.cards.forEach((pic) => {
+  cardsShusffle.forEach((pic) => {
     html += `
       <div class="card" data-card-name="${pic.name}">
         <div class="back" name="${pic.img}"></div>
@@ -38,14 +39,43 @@ window.addEventListener('load', (event) => {
     `;
   });
 
+  function hiddenCards() {
+    document.querySelectorAll('.card').forEach((card) => {      
+      card.classList.remove('turned');
+    });
+  }
+
+  function scoreTotal() {
+    document.getElementById('pairs-clicked').innerText = memoryGame.pairsClicked;
+    document.getElementById('pairs-guessed').innerText = memoryGame.pairsGuessed;
+
+    if (memoryGame.checkIfFinished()) {
+      document.getElementById('memory-board').innerHTML = "<div class='win'><p>YOU WON!!!</p></div>";
+    }
+  }
+
   // Add all the divs to the HTML
   document.querySelector('#memory-board').innerHTML = html;
 
+  scoreTotal();
+
   // 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}`);
+    card.addEventListener('click', (e) => {
+
+      card.classList.add('turned');
+      memoryGame.pickedCards.push(card.dataset.cardName);
+
+      if (memoryGame.pickedCards.length === 2) {
+        if (!memoryGame.checkIfPair(memoryGame.pickedCards[0], memoryGame.pickedCards[1])) {
+          setTimeout(hiddenCards, 1000);
+          memoryGame.pairsGuessed = 0;
+        }
+
+        memoryGame.pickedCards = [];
+      }
+
+      scoreTotal();
     });
   });
 });
diff --git a/src/memory.js b/src/memory.js
@@ -1,18 +1,40 @@
 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
+  shuffleCards(cards) {
+    if(!cards) {
+      return undefined;
+    }
+
+    for (let i = cards.length - 1; i > 0; i--) {
+      const randomIndex = Math.floor(Math.random() * (i + 1));
+      [cards[i], cards[randomIndex]] = [cards[randomIndex], cards[i]];
+    }
+
+    return cards;    
   }
 
   checkIfPair(card1, card2) {
-    // ... write your code here
+    this.pairsClicked++;
+
+    if (card1 === card2) {
+      this.pairsGuessed++;
+      return true;
+    }
+
+    return false;
   }
 
   checkIfFinished() {
-    // ... write your code here
+    if (this.pairsGuessed >= 8) {
+      return true;
+    }
+
+    return false;
   }
-}
+}
diff --git a/styles/style.css b/styles/style.css
@@ -88,3 +88,15 @@ p {
   font-size: 20px;
   text-align: center;
 }
+
+.win {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.win p {
+  font-size: 3rem;
+  font-weight: bold;
+}