From 5684c1113b2664cdc9d99d27b25f20673896c63d Mon Sep 17 00:00:00 2001
From: Yogesh Kumar Sai <w3yogesh@gmail.com>
Date: Sun, 2 Oct 2022 15:09:23 +0530
Subject: [PATCH 1/6] Add popup(modal) box

I have add a popup box in this game when game is over. The popup box show taken time and replay button.
---
 index.html | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 5fc16a2..db0afd7 100644
--- a/index.html
+++ b/index.html
@@ -64,7 +64,13 @@ <h3 style="text-align:center">time:<span id="timer">0</span></h3>
           <img class="front-face" src="images/zenitsu.png" alt="zenitsu" />
           <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>
\ No newline at end of file
+</html>

From 1c18567ac3ee49ef99f403bb35448ebe3e7ae423 Mon Sep 17 00:00:00 2001
From: Yogesh Kumar Sai <w3yogesh@gmail.com>
Date: Sun, 2 Oct 2022 15:11:40 +0530
Subject: [PATCH 2/6] Popup box

using javascript show popup box and using counter variable show take time on popup box.
---
 index.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/index.js b/index.js
index a517b78..1c796d9 100644
--- a/index.js
+++ b/index.js
@@ -1,7 +1,8 @@
-
 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
@@ -29,8 +30,10 @@ function checkForMatch(){
         matched++;
         if(matched===6)
         {
-        alert("hurrah! you did it")
+        //show pop-up when game finished
         clearInterval(interval)
+        modal.style.cssText = "display : block;";
+        timer_box.innerHTML = "<b>" + counter + "Secs</br>"
         }
         else
         alert("woah! matched")

From 1ff5c04343d572b10b7f52ba7be464d10f0071f2 Mon Sep 17 00:00:00 2001
From: Yogesh Kumar Sai <w3yogesh@gmail.com>
Date: Sun, 2 Oct 2022 15:13:07 +0530
Subject: [PATCH 3/6] Popup Box Design

using CSS I've designed popup box and button.
---
 style.css | 50 +++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 49 insertions(+), 1 deletion(-)

diff --git a/style.css b/style.css
index 27d5aed..c5f8d16 100644
--- a/style.css
+++ b/style.css
@@ -29,6 +29,7 @@ header{
     text-transform: capitalize;
     padding: 3px;
     font-weight: bold;
+
 }
 .memory-card{
     width: 24%;
@@ -52,4 +53,51 @@ header{
 }
 .front-face,.back-face{
     pointer-events: none;
-}
\ No newline at end of file
+}
+.modal {
+    position: absolute;
+    background: #00000070;
+    color: #eeee;
+    display: none;
+    z-index: 9999;
+    width: 100%;
+    height: 100%;
+    top: 0;
+}
+.modal-body {
+    position: absolute;
+    background: #96b6f1;
+    color: #252552;
+    width: 30vw;
+    height: 25vh;
+    padding: 20px;
+    border: 1px solid #eee;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    flex-direction: column;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: -2px -1px 17px #b6b6b6, 0px 0px 20px 0px #f6f6f6;
+}
+.finish-text {
+    text-transform: uppercase;
+}
+.modal-btn {
+    color: #eeee;
+    background: #144e69;
+    padding: 10px;
+    margin: 10px 0 0 0;
+    width: 40%;
+    font-size: 1.4vw;
+    border-radius: 20px;
+    border: 1px solid #000;
+    cursor: pointer;
+}
+.modal-btn:hover{
+    background: #eee;
+    color: #033b54;
+    border-radius: 10px;
+}

From 3642bc8f349afffcf6639961a394f9f2c03d7ae3 Mon Sep 17 00:00:00 2001
From: Yogesh Kumar Sai <w3yogesh@gmail.com>
Date: Sun, 2 Oct 2022 15:20:30 +0530
Subject: [PATCH 4/6] Update CONTRIBUTORS.md

---
 CONTRIBUTORS.md | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index f6962a5..afdbeea 100644
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -14,7 +14,18 @@
         <br />
     </td>
   </tr>
-  
+  <tr>
+    <td align="center">
+        <a href="https://github.com/w3yogesh">
+            <img src="https://avatars.githubusercontent.com/u/34393512?v=4" width="100px;" alt="Yogesh Kumar Sai"/>
+            <br />
+            <sub>
+                <b>Yogesh Kumar Sai </b>
+            </sub>
+        </a>
+        <br />
+    </td>
+  </tr>
   
 </table>
 

From 7fe0d68f366955e12608c9b38c28a5a430cd5437 Mon Sep 17 00:00:00 2001
From: Yogesh Kumar Sai <w3yogesh@gmail.com>
Date: Sun, 2 Oct 2022 15:21:16 +0530
Subject: [PATCH 5/6] Update CONTRIBUTORS.md

---
 CONTRIBUTORS.md | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index afdbeea..8de267f 100644
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -13,8 +13,6 @@
         </a>
         <br />
     </td>
-  </tr>
-  <tr>
     <td align="center">
         <a href="https://github.com/w3yogesh">
             <img src="https://avatars.githubusercontent.com/u/34393512?v=4" width="100px;" alt="Yogesh Kumar Sai"/>
@@ -25,7 +23,6 @@
         </a>
         <br />
     </td>
-  </tr>
   
 </table>
 

From 8a5eccad346b75f3e7a0ad529c9c07a9af77a014 Mon Sep 17 00:00:00 2001
From: Yogesh Kumar Sai <w3yogesh@gmail.com>
Date: Sun, 2 Oct 2022 15:21:56 +0530
Subject: [PATCH 6/6] Update CONTRIBUTORS.md

---
 CONTRIBUTORS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index 8de267f..3a7d496 100644
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -15,7 +15,7 @@
     </td>
     <td align="center">
         <a href="https://github.com/w3yogesh">
-            <img src="https://avatars.githubusercontent.com/u/34393512?v=4" width="100px;" alt="Yogesh Kumar Sai"/>
+            <img src="https://avatars.githubusercontent.com/u/27480542?v=4" width="100px;" alt="Yogesh Kumar Sai"/>
             <br />
             <sub>
                 <b>Yogesh Kumar Sai </b>