Add modal(Popup) at when finished the game

CONTRIBUTORS.md

@@ -14,6 +14,17 @@
         <br />
     </td>
     <td align="center">
+
+        <a href="https://github.com/w3yogesh">
+            <img src="https://avatars.githubusercontent.com/u/27480542?v=4" width="100px;" alt="Yogesh Kumar Sai"/>
+            <br />
+            <sub>
+                <b>Yogesh Kumar Sai </b>
+  </sub>
+        </a>
+        <br />
+    </td>
+     <td align="center">
         <a href="https://github.com/harshN-17">
             <img src="https://avatars.githubusercontent.com/u/96466588?v=4" width="100px;" alt="Harsh Narayan"/>
             <br />
@@ -23,6 +34,7 @@
         </a>
         <br />
     </td>
+
     <td align="center">
         <a href="https://github.com/DNA5769">
             <img src="https://avatars.githubusercontent.com/u/40732639?v=4" width="100px;" alt="Lovedeep singh kamal"/>
@@ -34,6 +46,5 @@
     </td>
   </tr>
 
-
 </table>
 

index.html

@@ -71,7 +71,13 @@ <h4 class="time--stat" style="text-align:center">
           <img class="front-face" src="#" alt="card front face" />
           <img class="back-face" src="images/cover.png" alt="card cover" />
         </div>
-
       </section>
+      <div class="modal">
+        <div class="modal-body">
+          <h2 class="finish-text">hurrah! you did it</h2>
+          <h3 style="text-align:center">Taken Time: <span class="timer-box"></span></h3>
+          <button id="restart-btn" class="modal-btn" onclick="restartGame()">Replay</button>
+        </div>
+    </div>
 </body>
-</html>
+</html>

index.js

@@ -1,123 +1,193 @@
-function restartGame(){
-    window.location.reload()
-}
-
-// Wrapping entire code in anonymous function and calling it, so that user doesn't have access to cardImageSrcs
-(() => {
-    const cards = document.querySelectorAll('.memory-card')
-    const restartBtn = document.querySelector('#restart-btn')
-    const timer = document.querySelector('#timer')
-    const bestTimer = document.querySelector('#best--timer');
-    //retrieve best score from the local storage
-    let bestScore = localStorage.getItem("memory-game-best-score");
-    //initialise with the best score
-    bestTimer.innerHTML = "<b>" + (bestScore == null ? "-" : bestScore) + "</b>";
-    let counter = 0;
-    //increasing the counter
-
-    const interval = setInterval(function(){
-        counter++;
-        console.log()
-        timer.innerHTML = "<b>" + counter + "</b>";
-    }, 1000);
-
-    // Storing image sources for list of cards
-    // Storing it as a list and not a matrix to make it a bit difficult to map list to the 3x4 grid
-    const cardImageSrcs = [
-        'images/cards/inosuke.png',
-        'images/cards/nezuko.png',
-        'images/cards/rengoku.png',
-        'images/cards/mask.png',
-        'images/cards/tanjiro.png',
-        'images/cards/zenitsu.png',
-        'images/cards/inosuke.png',
-        'images/cards/nezuko.png',
-        'images/cards/rengoku.png',
-        'images/cards/mask.png',
-        'images/cards/tanjiro.png',
-        'images/cards/zenitsu.png',
-    ];
-    const flippedCards = []
-    let matched=0;
-
-    function shuffle(array) {
-        let currentIndex = array.length,  randomIndex;
-
-        // While there remain elements to shuffle.
-        while (currentIndex != 0) {
-
-        // Pick a remaining element.
-        randomIndex = Math.floor(Math.random() * currentIndex);
-        currentIndex--;
-
-        // And swap it with the current element.
-        [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
-        }
-
-        return array;
-    }
-    // Shuffling cards
-    shuffle(cardImageSrcs);
-
-    function checkForMatch(){
-        //if matched
-        if(flippedCards[0].children[0].src===flippedCards[1].children[0].src) // Checking if the flipped cards have same src i.e are matching
-        {        
-            matched++;
-            if(matched===6)
-            {
-                alert("hurrah! you did it")
-                //print the updated best score on the page
-                if(bestScore == null) 
-                    bestScore = counter;
-                else{
-                    bestScore = Math.min(bestScore, counter);
-                }
-                //store the best score on the local storage
-                localStorage.setItem("memory-game-best-score", bestScore);
-                bestTimer.innerHTML = "<b>" + bestScore + "</b>";
-                clearInterval(interval)
-            }
-            else
-            alert("woah! matched")
-
-        }
-        //if not matched
-        else
-        {
-            flippedCards.forEach(flippedCard=>{
-                flippedCard.children[0].src="#"; // Removing image src so that it isn't visible through HTML
-                flippedCard.children[0].alt="card front face"; // Removing image alt so that it isn't visible through HTML
-                flippedCard.children[1].style.display="block";
-            })
-            alert("haha! better luck next time");
-        }
-
-        flippedCards.length= 0;
-    }
-
-    function flipCard(e, i){
-        const card = e.target
-
-        // This means that card is already flipped currently, so we exit out of function
-        if (card.children[0].src!==window.location.href+"#")
-            return;
-
-        flippedCards.push(card)
-        card.children[0].src=cardImageSrcs[i]; // Setting image source for flipped front face
-        card.children[0].alt=cardImageSrcs[i].split('/').slice(-1)[0].split('.').slice(0, -1).join('.'); // Setting image file name as alt text for flipped front face
-        card.children[1].style.display="none";
-
-        //when we have filled two cards check for the match
-        if(flippedCards.length === 2)
-        {
-            setTimeout(checkForMatch,100); // Adding a small delay, so that card gets enough time to render updated src before alert pops up
-        }
-    }
-
-    cards.forEach((card, i)=>{
-        card.addEventListener('click',e=>flipCard(e, i)); // Passing index of card when calling flipCard
-    })
-})();
-
-
+const cards = document.querySelectorAll('.memory-card')
+const restartBtn = document.querySelector('#restart-btn')
+const timer = document.querySelector('#timer')
+const modal = document.querySelector('.modal')
+const timer_box = document.querySelector('.timer-box')
+let counter = 0;
+
+//increasing the counter
+const interval = setInterval(function(){
+    counter++;
+    console.log()
+    timer.innerHTML = "<b>" + counter + "</b>";
+  }, 1000);
+
+function restartGame(){
+    window.location.reload()
+}
+
+const flippedCards = []
+let matched=0;
+
+function checkForMatch(){
+    //if matched
+    if(flippedCards[0].dataset.character===flippedCards[1].dataset.character)
+    {
+        //remove listener from the card to avoid clicking again
+        flippedCards[0].removeEventListener('click',flipCard)
+        flippedCards[1].removeEventListener('click',flipCard)
+
+        matched++;
+        if(matched===6)
+        {
+        //show pop-up when game finished
+        clearInterval(interval)
+        modal.style.cssText = "display : block;";
+        timer_box.innerHTML = "<b>" + counter + "Secs</br>"
+        }
+        else
+        alert("woah! matched")
+
+    }
+    //if not matched
+    else
+    {
+        flippedCards.forEach(flippedCard=>{
+            flippedCard.children[1].style.display="block";
+        })
+        alert("haha! better luck next time");
+    }
+
+    flippedCards.length= 0;
+}
+
+function flipCard(e){
+    const card = e.target
+    flippedCards.push(card)
+    card.children[1].style.display="none";
+
+    //when we have filled two cards check for the match
+    if(flippedCards.length === 2)
+    {
+        setTimeout(checkForMatch,0); 
+    }
+}
+
+cards.forEach(card=>{
+    card.addEventListener('click',flipCard);
+})
+
+
+function restartGame(){
+    window.location.reload()
+}
+
+// Wrapping entire code in anonymous function and calling it, so that user doesn't have access to cardImageSrcs
+(() => {
+    const cards = document.querySelectorAll('.memory-card')
+    const restartBtn = document.querySelector('#restart-btn')
+    const timer = document.querySelector('#timer')
+    const bestTimer = document.querySelector('#best--timer');
+    //retrieve best score from the local storage
+    let bestScore = localStorage.getItem("memory-game-best-score");
+    //initialise with the best score
+    bestTimer.innerHTML = "<b>" + (bestScore == null ? "-" : bestScore) + "</b>";
+    let counter = 0;
+    //increasing the counter
+
+    const interval = setInterval(function(){
+        counter++;
+        console.log()
+        timer.innerHTML = "<b>" + counter + "</b>";
+    }, 1000);
+
+    // Storing image sources for list of cards
+    // Storing it as a list and not a matrix to make it a bit difficult to map list to the 3x4 grid
+    const cardImageSrcs = [
+        'images/cards/inosuke.png',
+        'images/cards/nezuko.png',
+        'images/cards/rengoku.png',
+        'images/cards/mask.png',
+        'images/cards/tanjiro.png',
+        'images/cards/zenitsu.png',
+        'images/cards/inosuke.png',
+        'images/cards/nezuko.png',
+        'images/cards/rengoku.png',
+        'images/cards/mask.png',
+        'images/cards/tanjiro.png',
+        'images/cards/zenitsu.png',
+    ];
+    const flippedCards = []
+    let matched=0;
+
+    function shuffle(array) {
+        let currentIndex = array.length,  randomIndex;
+
+        // While there remain elements to shuffle.
+        while (currentIndex != 0) {
+
+        // Pick a remaining element.
+        randomIndex = Math.floor(Math.random() * currentIndex);
+        currentIndex--;
+
+        // And swap it with the current element.
+        [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
+        }
+
+        return array;
+    }
+    // Shuffling cards
+    shuffle(cardImageSrcs);
+
+    function checkForMatch(){
+        //if matched
+        if(flippedCards[0].children[0].src===flippedCards[1].children[0].src) // Checking if the flipped cards have same src i.e are matching
+        {        
+            matched++;
+            if(matched===6)
+            {
+                alert("hurrah! you did it")
+                //print the updated best score on the page
+                if(bestScore == null) 
+                    bestScore = counter;
+                else{
+                    bestScore = Math.min(bestScore, counter);
+                }
+                //store the best score on the local storage
+                localStorage.setItem("memory-game-best-score", bestScore);
+                bestTimer.innerHTML = "<b>" + bestScore + "</b>";
+                clearInterval(interval)
+            }
+            else
+            alert("woah! matched")
+
+        }
+        //if not matched
+        else
+        {
+            flippedCards.forEach(flippedCard=>{
+                flippedCard.children[0].src="#"; // Removing image src so that it isn't visible through HTML
+                flippedCard.children[0].alt="card front face"; // Removing image alt so that it isn't visible through HTML
+                flippedCard.children[1].style.display="block";
+            })
+            alert("haha! better luck next time");
+        }
+
+        flippedCards.length= 0;
+    }
+
+    function flipCard(e, i){
+        const card = e.target
+
+        // This means that card is already flipped currently, so we exit out of function
+        if (card.children[0].src!==window.location.href+"#")
+            return;
+
+        flippedCards.push(card)
+        card.children[0].src=cardImageSrcs[i]; // Setting image source for flipped front face
+        card.children[0].alt=cardImageSrcs[i].split('/').slice(-1)[0].split('.').slice(0, -1).join('.'); // Setting image file name as alt text for flipped front face
+        card.children[1].style.display="none";
+
+        //when we have filled two cards check for the match
+        if(flippedCards.length === 2)
+        {
+            setTimeout(checkForMatch,100); // Adding a small delay, so that card gets enough time to render updated src before alert pops up
+        }
+    }
+
+    cards.forEach((card, i)=>{
+        card.addEventListener('click',e=>flipCard(e, i)); // Passing index of card when calling flipCard
+    })
+})();
+
+