ironhack-labs · MagdaDra · Apr 20, 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>
@@ -19,5 +20,8 @@ <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
@@ -29,6 +29,9 @@ const memoryGame = new MemoryGame(cards);
 
 window.addEventListener('load', (event) => {
   let html = '';
+
+  memoryGame.shuffleCards();
+
   memoryGame.cards.forEach((pic) => {
     html += `
       <div class="card" data-card-name="${pic.name}">
@@ -40,12 +43,62 @@ 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
-      console.log(`Card clicked: ${card}`);
+
+    if (memoryGame.pairsGuessed === 12) { // it should be checked first before each click
+      const youWonBox = document.createElement("div") // where is this div created?? 
+      youWonBox.className = "you-won"
+      const boxParagraph = document.createElement("p")
+      boxParagraph.innerHTML = "You won!"
+      youWonBox.appendChild(boxParagraph)
+      document.body.appendChild(youWonBox)
+
+      return  
+    }
+
+    else {
+
+      if (memoryGame.pickedCards.length < 2){
+        card.classList.add("turned")
+
+        memoryGame.pickedCards.push(card) 
+      }
+     if (memoryGame.pickedCards.length === 2) {
+
+        if (!memoryGame.checkIfPair(memoryGame.pickedCards[0], memoryGame.pickedCards[1])){ // here is sth wrong - in debbugger the two identical cards return value false
+
+          /* memoryGame.pickedCards[0].classList.remove("turned");
+          memoryGame.pickedCards[1].classList.remove("turned"); */
+          const card1 = memoryGame.pickedCards[0]
+          const card2 = memoryGame.pickedCards[1]
+          setTimeout(() => {    //it doeasn't work on the first two cards, then starts working             
+          card1.classList.remove("turned");
+           card2.classList.remove("turned");
+          }, 1000) 
+
+        } 
+
+        memoryGame.pickedCards = []
+      } 
+
+    }
+})
+
     });
-  });
-});
+
+
+  })
+
+
+
+
+
+
+
+
+
+
diff --git a/src/memory.js b/src/memory.js
@@ -1,18 +1,58 @@
 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
+    if(this.cards == null) {
+      return undefined
+    } else {
+
+      for (let i = this.cards.length - 1; i > 0; i--) {
+        const copyOfItemPositionBeingLooped = this.cards[i];
+        const randomlySelectedPosition = Math.floor(Math.random() * i); 
+        this.cards[i] = this.cards[randomlySelectedPosition];
+        this.cards[randomlySelectedPosition] = copyOfItemPositionBeingLooped
+      }
+
+      return this.cards
+
+    /* const shuffledCards = []
+    for (let i = this.cards.length - 1; i > 0; i--) {
+      let randomCard = this.cards[Math.floor(Math.random() * i)]
+      shuffledCards.push(randomCard)
+      this.cards.splice(this.cards.indexOf(randomCard), 1)
+    }
+    return shuffledCards */}
   }
 
   checkIfPair(card1, card2) {
-    // ... write your code here
+    console.log(card1, card2)
+    this.pairsClicked++
+    let clickDisplayed = document.getElementById("pairs-clicked")
+      clickDisplayed.innerHTML = this.pairsClicked
+
+const pickedCard1 = card1.getAttribute("data-card-name")
+const pickedCard2 = card2.getAttribute("data-card-name")
+
+    if (pickedCard1 === pickedCard2) {
+      this.pairsGuessed++
+      let guessDisplayed = document.getElementById("pairs-guessed")
+      guessDisplayed.innerHTML = this.pairsGuessed
+      return true
+    } else {
+      return false
+    }
   }
 
   checkIfFinished() {
-    // ... write your code here
-  }
+    if (this.pairsGuessed === this.cards.length/2) {
+      return true
+    } else {
+      return false
+    }
+  } 
 }
diff --git a/styles/style.css b/styles/style.css
@@ -88,3 +88,15 @@ p {
   font-size: 20px;
   text-align: center;
 }
+
+.you-won {
+  padding: 50px;
+  background-color: rgb(255, 99, 99);
+  border-radius: 8px;
+  position: absolute;
+  top: 50%;
+  left: 40%
+
+
+
+}