Added Alert Message & Style. #Day16

VertikaJain · VertikaJain · commit 8e82c87761bb · 2020-07-02T22:17:49.000+05:30
diff --git a/memory-game/README.md b/memory-game/README.md
diff --git a/memory-game/app.js b/memory-game/app.js
@@ -48,10 +48,11 @@ const cardArray = [
     img: 'images/backbone.png'
   }
 ]
-
+cardArray.sort(() => 0.5 - Math.random());
 let selectedCards = [], selectedCardIds = [], cardsWon = [];
 const grid = document.querySelector(".grid");
 const result = document.getElementById("result");
+const alert = document.querySelector(".alert");
 
 window.addEventListener("DOMContentLoaded", () => {
   createBoard();
@@ -106,6 +107,7 @@ checkForMatch = () => {
         img.removeEventListener("click", flipCard);
       }
     }
+    setAlert("Card Matched!", "success");
   }
   // CASE 3: ON INCORRECT MATCH OF CARDS
   else {
@@ -118,7 +120,8 @@ checkForMatch = () => {
 
   // on completion of game
   if (cardsWon.length === cardArray.length / 2) {
-    // alert 
+    setAlert("Congratulations! You have won the game!", "success");
+    result.textContent = cardsWon.length + "! You have won the game!";
   }
 }
 
@@ -129,4 +132,15 @@ setLogo = (id0, id1) => {
     imgs[id0].setAttribute("src", "images/logo.png");
     imgs[id1].setAttribute("src", "images/logo.png");
   }, 1000);
+  setAlert("Card does not match!", "danger");
 }
+
+// method to display alert message
+setAlert = (text, styleClass) => {
+  alert.textContent = text;
+  alert.classList.add(`alert-${styleClass}`);
+  setTimeout(() => {
+    alert.textContent = ``;
+    alert.classList.remove(`alert-${styleClass}`);
+  }, 1000);
+}
diff --git a/memory-game/index.html b/memory-game/index.html
@@ -9,7 +9,8 @@
 </head>
 <body>
   <div class="grid"></div>
-  <h3>Your Score : <span id="result"></span></h3>
+  <p class="alert"></p>
+  <h3>Your Score : <span id="result">0</span></h3>
   <!-- javascript -->
   <script src="app.js"></script>
 </body>
diff --git a/memory-game/style.css b/memory-game/style.css
@@ -6,10 +6,25 @@
   padding: 50px;
 }
 
-h3 {
+h3, p {
   padding-left: 50px;
+  text-transform: capitalize;
 }
 
 body {
   background-color:#FCFCC9;
+}
+
+.alert {
+  margin-bottom: 1rem;
+  height: 1.25rem;
+  border-radius: 0.25rem;
+}
+.alert-danger {
+  color: #721c24;
+  background: #f8d7da;
+}
+.alert-success {
+  color: #155724;
+  background: #d4edda;
 }

Original file line number	Diff line number	Diff line change
`@@ -48,10 +48,11 @@ const cardArray = [`
`48`	`48`	`img: 'images/backbone.png'`
`49`	`49`	`}`
`50`	`50`	`]`
`51`		`-`
	`51`	`+cardArray.sort(() => 0.5 - Math.random());`
`52`	`52`	`let selectedCards = [], selectedCardIds = [], cardsWon = [];`
`53`	`53`	`const grid = document.querySelector(".grid");`
`54`	`54`	`const result = document.getElementById("result");`
	`55`	`+const alert = document.querySelector(".alert");`
`55`	`56`
`56`	`57`	`window.addEventListener("DOMContentLoaded", () => {`
`57`	`58`	`createBoard();`
`@@ -106,6 +107,7 @@ checkForMatch = () => {`
`106`	`107`	`img.removeEventListener("click", flipCard);`
`107`	`108`	`}`
`108`	`109`	`}`
	`110`	`+ setAlert("Card Matched!", "success");`
`109`	`111`	`}`
`110`	`112`	`// CASE 3: ON INCORRECT MATCH OF CARDS`
`111`	`113`	`else {`
`@@ -118,7 +120,8 @@ checkForMatch = () => {`
`118`	`120`
`119`	`121`	`// on completion of game`
`120`	`122`	`if (cardsWon.length === cardArray.length / 2) {`
`121`		`- // alert`
	`123`	`+ setAlert("Congratulations! You have won the game!", "success");`
	`124`	`+ result.textContent = cardsWon.length + "! You have won the game!";`
`122`	`125`	`}`
`123`	`126`	`}`
`124`	`127`
`@@ -129,4 +132,15 @@ setLogo = (id0, id1) => {`
`129`	`132`	`imgs[id0].setAttribute("src", "images/logo.png");`
`130`	`133`	`imgs[id1].setAttribute("src", "images/logo.png");`
`131`	`134`	`}, 1000);`
	`135`	`+ setAlert("Card does not match!", "danger");`
`132`	`136`	`}`
	`137`	`+`
	`138`	`+// method to display alert message`
	`139`	`+setAlert = (text, styleClass) => {`
	`140`	`+ alert.textContent = text;`
	`141`	+ alert.classList.add(`alert-${styleClass}`);
	`142`	`+ setTimeout(() => {`
	`143`	+ alert.textContent = ``;
	`144`	+ alert.classList.remove(`alert-${styleClass}`);
	`145`	`+ }, 1000);`
	`146`	`+}`