ironhack-labs · Tetsewa · Feb 6, 2024 · Feb 7, 2024 · Feb 7, 2024 · Feb 9, 2024
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,14 @@ <h2>Score</h2>
       <p>Pairs clicked: <span id="pairs-clicked">0</span></p>
       <p>Pairs guessed: <span id="pairs-guessed">0</span></p>
     </div>
+    <button>click Here</button>
     <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
@@ -1,3 +1,6 @@
+
+
+
 const cards = [
   { name: 'aquaman', img: 'aquaman.jpg' },
   { name: 'batman', img: 'batman.jpg' },
@@ -27,7 +30,9 @@ const cards = [
 
 const memoryGame = new MemoryGame(cards);
 
-window.addEventListener('load', (event) => {
+let isProcessing= false;
+
+window.addEventListener("load", (event) => {
   let html = '';
   memoryGame.cards.forEach((pic) => {
     html += `
@@ -41,11 +46,79 @@ window.addEventListener('load', (event) => {
   // Add all the divs to the HTML
   document.querySelector('#memory-board').innerHTML = html;
 
+  const pairsClicked=document.querySelector("#pairs-clicked")
+  const pairsGuessed=document.querySelector("#pairs-guessed")
+
   // 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}`);
+      if (isProcessing){
+        return;
+      }
+      //we turn the card and push it into the empty pickedCards array
+      card.classList.add("turned")
+      memoryGame.pickedCards.push(card)
+
+      //Adds 1 to the pairsClicked and adds it in the HTML
+      memoryGame.pairsClicked++;
+      pairsClicked.innerHTML=memoryGame.pairsClicked;
+
+      //to check if the person has clicked 2 cards
+      if (memoryGame.pickedCards.length===2){
+        isProcessing=true;
+
+      const check =memoryGame.checkIfPair(
+        memoryGame.pickedCards[0].getAttribute("data-card-name"),
+        memoryGame.pickedCards[1].getAttribute("data-card-name")
+      );
+
+      if (check){
+        const finish=memoryGame.checkIfFinished();
+        if (finish){
+          window.alert("Woooo-hoooooo!!!!! You won!👏👏👏👏👏👏👏👏");
+          setTimeout(()=>{
+            memoryGame.pairsClicked=0;
+            pairsClicked.innerHTML=memoryGame.pairsClicked;
+
+            memoryGame.pairsGuessed=0;
+            pairsGuessed.innerHTML=memoryGame.pairsGuessed;
+
+            document.querySelectorAll(".card").forEach((card) => {
+              card.classList.remove("turned")
+            })
+          },1000)
+
+        }
+
+        pairsGuessed.innerHTML = memoryGame.pairsGuessed;
+        memoryGame.pickedCards=[]
+
+        isProcessing=false;
+
+
+      }
+      else {
+        setTimeout(()=>{
+          memoryGame.pickedCards[0].classList.remove("turned");
+          memoryGame.pickedCards[1].classList.remove("turned");
+          memoryGame.pickedCards= [];
+
+          isProcessing=false;
+        }, 1000);
+      }
+      }
+
+      //console.log(`Card clicked: ${card}`);
     });
+
   });
+
 });
+
+
+
+
+
+
+
diff --git a/src/memory.js b/src/memory.js
@@ -1,18 +1,54 @@
 class MemoryGame {
   constructor(cards) {
     this.cards = cards;
+    console.log(cards)
     // add the rest of the class properties here
+    this.pickedCards=[];
+    this.pairsClicked=0;
+    this.pairsGuessed=0;
   }
-
+  //Iteration 2.2
   shuffleCards() {
     // ... write your code here
+    //should return the shuffled (mixed) array of cards
+    let shuffle=0;
+    if (this.cards){
+      for (let i=0;i<this.cards.length -1;i++){
+        let rand=Math.floor(Math.random()*(i +1));
+        shuffle=this.cards[rand];
+        this.cards[rand]=this.cards[i];
+        this.cards[i]=shuffle;
+      }
+      return this.cards;
+    }
+    return undefined
   }
 
+
   checkIfPair(card1, card2) {
-    // ... write your code here
-  }
+    this.pairsClicked++
+    //if(card1.name===card2.name){
+      if(card1===card2){
+        this.pairsGuessed++
+        return true
+      }
+      else {
+        return false
+      //} 
+    }
+   }
+
 
   checkIfFinished() {
-    // ... write your code here
+    if(this.pairsGuessed===0){
+      return false
+    }
+    if(this.pairsGuessed===this.cards.length/2){
+      return true
+    }
+    else {
+      return false
+    }
   }
 }
+