DysfunctionalCoders · seanbelknap · Oct 10, 2021 · Oct 10, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/INSTRUCTIONS_README.md b/INSTRUCTIONS_README.md
@@ -12,31 +12,41 @@ Why does querySelectAll give us an array of elements?
 
 
 1. (X) Connect the given javascript file to your HTML 
+
 2. (X) Connect the given styles file to your HTML
-3. (X) Use the styles file to center the container class element in the middle of the screen using flexbox use a flex direction of column
+
+3. (X) Use the styles file to center the container class element in the middle of the screen 
+
 4.  In your HTML file, inside of the section element that has a class of "win-game-modal", Create a div in your HTML that has a class of modal and id of modal
-	1. add a child div to that modal and give it class of modal-content
+	1. add a child div to that modal and give it class of modal-content -->
 	2. The next 6 steps all happen in the div.modal-content element
-		1. add a span with an id of close
+		1. add a span with an id of close  
 		2. inside of the span with the id of close, type &times; in the opening and closing span tags.
 		3.  inform the user that they won and found all 8 pairs of cards
 		4. Show the vault-boy-thumb-up image
 		5. add a button with a class of btn and play-again-btn with text that reads "Play Again?"
 		6. (X) Style the modal content and make it look good  (try display flex, justify content center, flex direction column, align items center)
 	3. Once your done styling the modal class implement the following changes
 		1. give your modal class
-			1. (X) position: fixed
+			1. (X) position: fixed -->
 			2. (X) top: 0
 			3. (X) left: 0
 			4. (X) display: none
 5. Go to the JS file and look over the code, using the steps below will guide you on fixing the code.
 	1. (X) Go to the startGame function and implement the pseudo code
+      this function shuffles the cards and creates the table for which the cards are placed.
 	2. (X) Go to the compareTwo function and implement the pseudo code
+      this function compares two of the cards clicked. it will either time out and console log no match, or if it is a match then it will display the matched cards.
 	3. (X) Go the displayMatching Cards function and complete the unimplemented pseudo code
+      the displaymatching card and not matching cards are used for the compare function. Theyll flip the card back over or keep the paired ones visible to see.
 	4. (X) Go to the checkIsGameFinished and implement pseudo code
+      this code checks if the game is finished after each matched pair found to see if there are 16 pairs found. then it will end the game showing the modal
+
 	5. (X) Go to the addStatsToModal function and complete the unimplemented pseudocode
+    this code shows the stats in the modal showing (the time it took, the amount of moves, starcount)
 		1. Also change the innerHTML for the p tags so that they have useful information in it to the user.
 	6. (X) Go to the displayModal function and complete the unimplemented pseudocode
+
 
 Stuck??
 - After each major step, click through the game and see if any errors come up. If an error comes up refer to steps above and corresponding pseudo code to ensure to implemented it correctly.

diff --git a/index.html b/index.html
@@ -1,13 +1,16 @@
 <!doctype html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Fallout Memory Game</title>
     <!-- TODO: Connect the given styles file to this HTML -->
+    <link rel="stylesheet" href="styles/styles.css">
 </head>
+
 <body>
     <div class="container">
         <header class="header">
@@ -17,10 +20,10 @@ <h2>FallOut Edition</h2>
 
         <section class="score-panel">
             <h3>Score Panel</h3>
-        <ul id="star-rating" class="star-rating">
-            <li class="star"><i class="fa fa-star"></i></li>
-            <li class="star"><i class="fa fa-star"></i></li>
-            <li class="star"><i class="fa fa-star"></i></li>
+            <ul id="star-rating" class="star-rating">
+                <li class="star"><i class="fa fa-star"></i></li>
+                <li class="star"><i class="fa fa-star"></i></li>
+                <li class="star"><i class="fa fa-star"></i></li>
             </ul>
             <span class="moves-counter">0</span> Moves
             <div class="timer-container">
@@ -38,9 +41,22 @@ <h3>Score Panel</h3>
 
     <!-- Modal -->
     <section class="win-game-modal">
-
+        <div id="modal" class="modal">
+            <div class="modal-content">
+                <span id="close">&times;</span>
+                <h1>Congratulations!</h1>
+                <p>You have won the game and found all 8 pairs of cards.</p>
+                <img class="modal-img" src="./img/Vault-Boy-Thumb-Up.jpg" alt="">
+                <button class="btn , play-again-btn" >Play Again?</button>
+
+            </div>
+
+        </div>
+
     </section>
 
     <!-- TODO: Connect the given JS file to your HTML -->
 </body>
-</html>
+<script src="./js/index.js"></script>
+
+</html>
diff --git a/js/index.js b/js/index.js
@@ -36,22 +36,25 @@ function startGame() {
   // Invoke shuffle function and store in variable
   const shuffledDeck = shuffle(deckCards);
   // Implement a for loop on the shuffledDeck array
-
+  for (let i = 0; i < shuffledDeck.length; i++) {
+
     // Create the <td> tags and assign it to a variable called tdTag
-
+    let tdTag = document.createElement('td');
     // Give tdTag Element a class of card
-
+    tdTag.classList.add('card');
     // Create the <img> tag and assign it to an addImage variable
-
+    const addImage = document.createElement('img');
     // make the addImage a child of the tdTag
-
+    tdTag.appendChild(addImage);
     // Set the addImage element src path with the shuffled deck
     // TODO: replace the REPLACE ME string with the element in the shuffledDeck array at index i
-    addImage.setAttribute('src', 'img/' + 'REPLACE ME with the element in shuffleDeck at index i');
+    addImage.setAttribute('src', 'img/' + shuffledDeck[i]);
     // Add an alt tag to the addImage element
     addImage.setAttribute('alt', 'image of vault boy from fallout');
     // make the tdTag element a child of the deck element
-
+    deck.appendChild(tdTag);
+  }
+
 }
 
 startGame();
@@ -65,14 +68,14 @@ function removeCard() {
 
 function timer() {
   // Update the count every 1 second
-  time = setInterval(function() {
+  time = setInterval(function () {
     seconds++;
     if (seconds === 60) {
       minutes++;
       seconds = 0;
     }
     // Update the timer in HTML with the time it takes the user to play the game
-    timeCounter.innerHTML = "<i class='fa fa-hourglass-start'></i>" + " Timer: " + minutes + " Mins " + seconds + " Secs" ;
+    timeCounter.innerHTML = "<i class='fa fa-hourglass-start'></i>" + " Timer: " + minutes + " Mins " + seconds + " Secs";
   }, 1000);
 }
 
@@ -105,9 +108,9 @@ function resetEverything() {
 
 function incrMovesCounter() {
   // Update the html for the moves counter
-  movesCount.innerHTML ++;
+  movesCount.innerHTML++;
   // Keep track of the number of moves for every pair checked
-  moves ++;
+  moves++;
 }
 
 function adjustStarRating() {
@@ -135,7 +138,15 @@ function compareTwo() {
   // if the opened array has a length of two && the element at index = 0 src string
   // equals the element at index 1 src string
   // the image srcs match
-
+  if (opened.length === 2 && opened[0].src === opened[1].src){
+    displayMatchingCards()
+    console.log("It's a Match!")
+
+
+  } else if(opened.length === 2 && opened[0].src !== opened[1].src) {
+    displayNotMatchingCards()
+    console.log("No Match!")
+  }
     // TODO: Invoke the displayMatchingCards()
     // TODO: console log "It's a Match!"  
 
@@ -152,18 +163,18 @@ function displayMatchingCards() {
   /* Access the two cards in opened array and add
   the class of match to the imgages parent: the <li> tag
   */
-  setTimeout(function() {
+  setTimeout(function () {
     // add the match class (Why are we adding it to the parentElement?)
-      // the match class should make the img visible
+    // the match class should make the img visible
     opened[0].parentElement.classList.add("match");
     opened[1].parentElement.classList.add("match");
     // TODO: Push the flipped cards (opened[0] and opened[1]) to the matched array
-
+    matched.push(opened[0]);
+    matched.push(opened[1]);
     // Allow for further mouse clicks on cards
     document.body.style.pointerEvents = "auto";
     // TODO: invoke the checkIsGameFinished function
-
-
+    checkIsGameFinished();
     // Clear the opened array
     opened = [];
   }, 600);
@@ -175,7 +186,7 @@ function displayMatchingCards() {
 function displayNotMatchingCards() {
   /* After 700 miliseconds the two cards open will have
   the class of flip removed from the images parent element <li>*/
-  setTimeout(function() {
+  setTimeout(function () {
     // Remove class flip on images parent element
     opened[0].parentElement.classList.remove("flip");
     opened[1].parentElement.classList.remove("flip");
@@ -196,45 +207,47 @@ function addStatsToModal() {
   for (let i = 1; i <= 3; i++) {
     // Create a new Paragraph
     // TODO: create p tag and assign it a newly created statsElement variable
-
+    const statsElement = document.createElement('p');
     // Add a class to the new Paragraph
     // TODO: add the stats class to the statsElement
-
-    
+    statsElement.classList.add('stats');
+
     // Add the new created <p> tag to the modal content
     // TODO: add the statsElement as a child of the statsParent element
-
+    statsParent.appendChild(statsElement);
   }
   // Select all p tags with the class of stats and update the content
   let p = statsParent.querySelectorAll("p.stats");
   // Set the new <p> to have the content of stats (time, moves and star rating)
   // TODO: Update all of the innerHTML text appropriately
-  p[0].innerHTML = "Update the time here with the minutes and seconds";
-  p[1].innerHTML = "Update this with how many moves it took";
-  p[2].innerHTML = "Update this with the star rating";
+  p[0].innerHTML = `Your time was ${minutes}:${seconds}`;
+  p[1].innerHTML = `Moves Made: ${moves}`;
+  p[2].innerHTML = `Stars: ${starCount}`;
 }
 
 // TODO: Implement the pseudocode
 function displayModal() {
-// use getElementByID to grab the id="close" element and assign it to a variable called modalClose
+  // use getElementByID to grab the id="close" element and assign it to a variable called modalClose
+  const modalClose = document.getElementById("close");
 
-// use getElementByID to grab the id="modal" element and assign it to a variable called modal
+  // use getElementByID to grab the id="modal" element and assign it to a variable called modal
+  const modal = document.getElementById("modal");
 
-// Set modal to display block to show it
+  // Set modal to display block to show it
+  modal.style.display = "block";
 
-
-// When the user clicks on the modalClose <span> (x), 
-modalClose.onclick = function() {
+  // When the user clicks on the modalClose <span> (x), 
+  modalClose.onclick = function () {
     // set modal to diplay none
-
-};
-// When the user clicks anywhere outside of the modal, close it
-  window.onclick = function(event) {
-      
-      if (event.target === modal) {
-        // update modal style to display none
-        modal.style.display = "none"
-      }
+    modal.style.display = "none";
+  };
+  // When the user clicks anywhere outside of the modal, close it
+  window.onclick = function (event) {
+
+    if (event.target === modal) {
+      // update modal style to display none
+      modal.style.display = "none"
+    }
   };
 }
 
@@ -244,24 +257,24 @@ function checkIsGameFinished() {
   if (matched.length === 16) {
     // stop the game
     //TODO: invoke the stopTime function
-
+    stopTime();
     // tally stats
     // TODO: invoke the addStatsToModal
-
-    
+    addStatsToModal();
+
     // display modal
     // TODO: invoke the displayModal function
-
-    
+    displayModal();
+
   }
 }
 
 // if a card is clicked
-  // if timerStart is false
-      // start timer
-  // flip the card
+// if timerStart is false
+// start timer
+// flip the card
 
-deck.addEventListener("click", function(evt) {
+deck.addEventListener("click", function (evt) {
   if (evt.target.nodeName === "TD") {
     // To console if I was clicking the correct element
     console.log(evt.target.nodeName + " Was clicked");
@@ -299,7 +312,7 @@ deck.addEventListener("click", function(evt) {
 
 reset.addEventListener('click', resetEverything);
 
-playAgain.addEventListener('click',function() {
+playAgain.addEventListener('click', function () {
   modal.style.display = "none";
   resetEverything();
 });
diff --git a/styles/styles.css b/styles/styles.css
@@ -25,6 +25,8 @@ body {
 }
 /* TODO: this container class in the center of the screen using flex-direction column */
 .container {
+    display: flex;
+    flex-direction: column;
     align-items: center;
     margin-top: 8px;
 }
@@ -109,7 +111,11 @@ Section - Modal
 /* Modal (background) */
 .modal {
     /*Hidden by default */
+    position: fixed;
+    top: 0;
+    left: 0;
     display: block;
+    display: none;
     width: 100%;
     height: 100%;
     /* Fallback color */
@@ -121,7 +127,10 @@ Section - Modal
 /* Modal Content/Box */
 /* TODO: Style this and make it look better */
 .modal-content {
-
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
     margin: 5% auto;
     width: 80%;
 }