KC Verdi Finished with Homework 3

INSTRUCTIONS_README.md

@@ -11,9 +11,9 @@ 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
+1. (X) Connect the given javascript file to your HTML -- used the relative path inside a script tag to connect the index.js file which includes the javascript for the index.html file, nothing change in the browser
+2. (X) Connect the given styles file to your HTML -- linked the stylesheet to the index.html file using relative path, the layout and the format of the text changed when index.html displayed in browser
+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 - used flex box to put items in container in flex direction column, and then used align-items to center the deck
 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
 	2. The next 6 steps all happen in the div.modal-content element
@@ -22,21 +22,22 @@ Why does querySelectAll give us an array of elements?
 		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)
+		6. (X) Style the modal content and make it look good  (try display flex, justify content center, flex direction column, align items center) - center the image and button under the image
 	3. Once your done styling the modal class implement the following changes
 		1. give your modal class
 			1. (X) position: fixed
 			2. (X) top: 0
 			3. (X) left: 0
-			4. (X) display: none
+			4. (X) display: none - modal has moved to the top center and X is on top right of screen
 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
-	2. (X) Go to the compareTwo function and implement the pseudo code
-	3. (X) Go the displayMatching Cards function and complete the unimplemented pseudo code
-	4. (X) Go to the checkIsGameFinished and implement pseudo code
-	5. (X) Go to the addStatsToModal function and complete the unimplemented pseudocode
+	1. (X) Go to the startGame function and implement the pseudo code -added the yellow card blocks to the deck
+	2. (X) Go to the compareTwo function and implement the pseudo code - determines if there are two cards selected, if the src matches it is a match if not no match
+	3. (X) Go the displayMatching Cards function and complete the unimplemented pseudo code - keeps the selected matching cards displayed and allows selecting more cards
+	4. (X) Go to the checkIsGameFinished and implement pseudo code - if all cards have been flipped, stopped the time, log the stags, display the winner modal
+  when implemented got a innerHtml error line 225
+	5. (X) Go to the addStatsToModal function and complete the unimplemented pseudocode - cleared the innerHtml error above, modal not displayed get modalClosed not defined error line 242
 		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
+	6. (X) Go to the displayModal function and complete the unimplemented pseudocode - fixed error above.
 
 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.

index.html

@@ -6,7 +6,8 @@
           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" />
+    <script defer src="./js/index.js"></script>
 </head>
 <body>
     <div class="container">
@@ -38,6 +39,14 @@ <h3>Score Panel</h3>
 
     <!-- Modal -->
     <section class="win-game-modal">
+        <div id="modal" class="modal">
+            <div class="modal-content">
+                    <span id="close">&times;</span>
+                   <h4>You have Won and found all 8 pairs of cards</h4> 
+                   <img src="./img/Vault-Boy-Thumb-Up.jpg" alt="">
+                   <button class="btn play-again-btn">Play Again?</button>
+                </div>
+        </div>
 
     </section>
 

js/index.js

@@ -31,29 +31,40 @@ function shuffle(array) {
   return array;
 }
 
-// TODO: Implement this function
+
 function startGame() {
   // Invoke shuffle function and store in variable
   const shuffledDeck = shuffle(deckCards);
   // Implement a for loop on the shuffledDeck array
-
+  for(i = 0; i < shuffledDeck.length; i++){
     // Create the <td> tags and assign it to a variable called tdTag
 
+    var tdTag = document.createElement("td");
+
+    //console.log("tdTag");
+
     // Give tdTag Element a class of card
+    tdTag.setAttribute('class', 'card');
 
+    //console.log("tdTag");
     // Create the <img> tag and assign it to an addImage variable
-
+    var addImage = document.createElement("img");
     // make the addImage a child of the tdTag
-
+    tdTag.appendChild(addImage);
+    //console.log("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.src = shuffledDeck.src;
+    //console.log("addImage src");
+    // replace the REPLACE ME string with the element in the shuffledDeck array at index i
+    addImage.setAttribute('src', './img/' + `${shuffledDeck[i]}`);
+    //console.log("addImage src");
     // 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);
+    //console.log("make child");
+  }
 }
-
 startGame();
 
 function removeCard() {
@@ -129,25 +140,26 @@ function compareTwo() {
   if (opened.length === 2) {
     // Disable any further mouse clicks on other cards
     document.body.style.pointerEvents = "none";
-  }
   // Compare the two images src in the opened array
-  // TODO: implement
   // 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
-
-    // TODO: Invoke the displayMatchingCards()
-    // TODO: console log "It's a Match!"  
-
-
-  // TODO: if the image src's do not match
-
-    // TODO: invoke the displayNotMatchingCards()
-    // TODO: console log "No Match!"
-
+    if(opened[0].src == opened[1].src){
+      displayMatchingCards();
+ //     console.log("value is" +opened[0].src);
+      console.log("It's a Match!");
+
+  }else{
+      // if the image src's do not match
+      displayNotMatchingCards();
+    console.log("No Match!");
+    //console.log("value" + opened[0].src);
+  }
+  }
+
+
 }
 
-// TODO:
 function displayMatchingCards() {
   /* Access the two cards in opened array and add
   the class of match to the imgages parent: the <li> tag
@@ -157,13 +169,14 @@ function displayMatchingCards() {
       // 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
-
+    // 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
+    // invoke the checkIsGameFinished function
 
-
+    checkIsGameFinished();
     // Clear the opened array
     opened = [];
   }, 600);
@@ -195,33 +208,35 @@ function addStatsToModal() {
   // Create three different paragraphs
   for (let i = 1; i <= 3; i++) {
     // Create a new Paragraph
-    // TODO: create p tag and assign it a newly created statsElement variable
-
+    // create p tag and assign it a newly created statsElement variable
+    statsElement = document.createElement("p")
+
     // Add a class to the new Paragraph
-    // TODO: add the stats class to the statsElement
+     // add the stats class to the statsElement
+    statsElement.setAttribute('class', 'stats');
 
 
     // Add the new created <p> tag to the modal content
-    // TODO: add the statsElement as a child of the statsParent element
-
+    // 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 = " Timer: " + minutes + " Mins " + seconds + " Secs";
+  p[1].innerHTML = "Moves: " + moves;
+  p[2].innerHTML = "Star Rating: " +starCount;
 }
 
 // TODO: Implement the pseudocode
 function displayModal() {
 // 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
-
+const modal = document.getElementById("modal");
 // Set modal to display block to show it
-
+modal.style.display = "block";
 
 // When the user clicks on the modalClose <span> (x), 
 modalClose.onclick = function() {
@@ -243,16 +258,11 @@ function checkIsGameFinished() {
   // if the matched array has 16 elements,
   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();
   }
 }
 
@@ -291,6 +301,7 @@ deck.addEventListener("click", function(evt) {
     if (opened.length === 0 || opened.length === 1) {
       // Push that img to opened array
       opened.push(evt.target.firstElementChild);
+      console.log(evt.target.firstElementChild);
     }
     // Call compareTwo() function
     compareTwo();

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;
 }
@@ -67,7 +69,10 @@ p {
 h3 {
     font-weight: 400;
 }
-
+h4 {
+    font-weight: 400;
+    font-size: 80px;
+}
 /*----------------------------------
 Section - Score Panel
 ------------------------------------*/
@@ -116,14 +121,23 @@ Section - Modal
     background-color: rgb(46, 61, 73);
     /* With opacity */
     background-color: rgba(46, 61, 73, 0.6);
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: none;
+
 }
 
 /* Modal Content/Box */
 /* TODO: Style this and make it look better */
 .modal-content {
-
-    margin: 5% auto;
-    width: 80%;
+    color: white;
+    display:flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+
+
 }
 
 /* The Close Button */