Added pop-up modal

quynhnle135 · Feb 23, 2024 · af1876c · af1876c
1 parent d420a9e
commit af1876c
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 46 deletions.
diff --git a/index.html b/index.html
@@ -148,13 +148,14 @@ <h1 id="game-header">Memory Game</h1>
         <button id="reset-button" onclick="shuffleCards()">Reset</button>
     </div>
 
-    <!-- <div id="winModal" class="modal"> 
-        <div class="modal-container">
-            <span class="close">&times;</span>
-            <p>You Win!</p>
+    <div class="modal-container" id="modal-container">
+        <div class="modal">
+            <h1>You Win!</h1>
+            <p>Congratulations! You just finished matching all pairs!</p>
+            <button type="button" id="play-again" >Play Again</button>
         </div>
     </div>
-     -->
+
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -5,6 +5,15 @@ let cardTwo;
 let matched = 0;
 let disableDeck = false;
 
+// Modal
+const play_again = document.getElementById("play-again");
+const modal_container = document.getElementById("modal-container");
+
+play_again.addEventListener("click", () => {
+    modal_container.classList.remove("show");
+    shuffleCards();
+});
+
 function flipCard({target: clickedCard}) {
     if (clickedCard !== cardOne && !disableDeck) {
         clickedCard.classList.add("flip");
@@ -22,12 +31,12 @@ function flipCard({target: clickedCard}) {
 function matchCards(img1, img2) {
     if (img1 === img2) {
         matched++;
-        // If all 8 pairs are matched, shuffle cards to reset
-        // if (matched === 8) {
-        //     setTimeout(() => {
-        //         return shuffleCards();
-        //     }, 1000);
-        // }
+        // If all 8 pairs are matched, You Win popped up
+        if (matched === 8) {
+            setTimeout(() => {
+                modal_container.classList.add("show");
+            }, 500);
+        }
         cardOne.removeEventListener("click", flipCard);
         cardTwo.removeEventListener("click", flipCard);
         cardOne = "";
@@ -71,3 +80,5 @@ shuffleCards();
 cards.forEach(card => {
     card.addEventListener("click", flipCard);
 });
+
+
diff --git a/style.css b/style.css
@@ -14,15 +14,95 @@ body {
     background-color: #6563ff;
 }
 
-
-
 .wrapper {
     padding: 25px;
     border-radius: 10px;;
     background: #f8f8f8;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }
 
+.modal-container {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    background: rgba(0, 0, 0, 0.3);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.modal-container.show {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.modal {
+    background-color: white;
+    padding: 30px 40px;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-radius: 10px;
+    max-width: 100%;
+    font-size: 17px;
+    border: none;
+    box-shadow: 0px -2px 20px 0px #f8f8f8;
+}
+
+.modal h1, p {
+    padding: 10px;
+    font-family: "Press Start 2P", system-ui;
+}
+
+#play-again {
+    padding: 10px 20px;
+    border-radius: 5px;
+    color: white;
+    border: none;
+    background-color: #6563ff;
+    margin: 30px 0px 0px 0px;
+    box-shadow: 5px 5px 2px hsl(241, 93%, 83%);
+    letter-spacing: 3px;
+    font-size: 15px;
+    font-family: "Press Start 2P", system-ui;
+    cursor: pointer;
+}
+
+/* .modal-container {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    left: 0;
+    top: 0;
+    height: 100vh;
+    width: 100vw;
+    background-color: rgba(0, 0, 0, 0.3);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+} */
+
+/* .modal-container.show {
+    pointer-events: auto;
+    opacity: 1;
+} */
+
+/* .modal {
+    background-color: white;
+    width: 600px;
+    max-width: 100%;
+    padding: 30px 50px;
+    border-radius: 10px;
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+} */
+
 .cards, .card, .view {
     display: flex;
     align-items: center;
@@ -110,7 +190,7 @@ body {
     justify-content: center;
     color: white;
     z-index: 1;
-    top: 150px;
+    top: 125px;
     margin: auto;
     position: fixed;
     font-family: "Press Start 2P", system-ui;
@@ -130,51 +210,38 @@ body {
     font-family: "Press Start 2P", system-ui;
 }
 
-@media screen and (max-width: 700px) {
+@media only screen and (max-width: 400px) {
     #game-header {
-        top: 50px;
-    }
-    .cards{
-      height: 350px;
-      width: 350px;
-    }
-    .card .front-view img{
-      width: 17px;
+        top: 20px;
     }
-    .card .back-view img{
-      max-width: 40px;
+    .cards {
+        height: 300px;
+        width: 300px;
     }
-}
 
-@media screen and (max-width: 530px) {
-    #game-header {
-        top: 75px;
-    }
-    .cards{
-      height: 300px;
-      width: 300px;
-    }
-    .card .front-view img{
-      width: 15px;
+    .card .front-view img {
+        width: 15px;
     }
+
     .card .back-view img{
-      max-width: 35px;
+        max-width: 30px;
     }
 }
 
-@media screen and (max-height: 668px) {
+@media only screen and (min-width: 401px) {
     #game-header {
-        top: 25px;
+        top: 100px;
     }
-    .cards{
-      height: 300px;
-      width: 300px;
+    .cards {
+        height: 350px;
+        width: 350px;
     }
-    .card .front-view img{
-      width: 15px;
+
+    .card .front-view img {
+        width: 17px;
     }
+
     .card .back-view img{
-      max-width: 35px;
+        max-width: 40px;
     }
 }
-