Update index and script file to complete Class 5 HMWK

index.html

@@ -19,12 +19,22 @@ <h1>Welcome to Tic Tac Toe</h1>
       <table>
         <tr>
           <!-- the onclick calls a function called "handleClick" and passes itself to it -->
-          <td id='top-left' onclick="handleClick(this)" ></td>
-          <td id='top-middle'></td>
-          <td></td>
+          <td id='0-0' onclick="handleClick(this)" ></td>
+          <td id='0-1' onclick="handleClick(this)"></td>
+          <td id='0-2' onclick="handleClick(this)"></td>
         </tr>
         <!-- @TODO create new rows and cells for the rest of your TTT board. -->
         <!-- @TODO give each new cell an id & an event listener to call the "handleClick" function -->
+        <tr>
+          <td id='1-0' onclick="handleClick(this)" ></td>
+          <td id='1-1' onclick="handleClick(this)"></td>
+          <td id='1-2' onclick="handleClick(this)"></td>
+        </tr>
+        <tr>
+          <td id='2-0' onclick="handleClick(this)" ></td>
+          <td id='2-1' onclick="handleClick(this)"></td>
+          <td id='2-2' onclick="handleClick(this)"></td>
+        </tr>
       </table>
     </div>
   </body>

scripts.js

@@ -8,7 +8,7 @@
 
 // The variable will change from X to O based on what player turn it is. We need to hold this so we can place an X or O on the board when they're clicked.
 let currentMarker = 'X'
-
+let board = [["", "", ""], ["", "", ""], ["", "", ""]]
 
 
 
@@ -19,6 +19,10 @@ const handleClick = (element) => {
   // this uses the "log" method on the "console" to log out the element's id so we can see it with our human eyes
   console.log(`The element you clicked on has an id:  ${element.id}`)
 
+  // NOTE TO SELF: If you were to add content to an element in the index.html file, the innerHTML prints in the browser console, and program will stop there.
+  // console.log(document.getElementById(element.id).innerHTML) => to witness the innerHTML 
+
+
   // this next line prevents an X being changed to an O or an O being changed to an X by...
   //  checking to see if the square clicked has anything in it, if not continue
   if(!document.getElementById(element.id).innerHTML){
@@ -34,7 +38,10 @@ const handleClick = (element) => {
 
 
 
-
+// BIG NOTE: In the following function, you can pass `id` as a parameter into the function. 
+// 1. The element was passed to handleClick function when you used "this" in index.html
+// 2. You can access `id` of elements because BUILT-IN
+// 3. The id was passed to addMarker in handleClick
 
 // this function places the "currentMarker" inside the HTML element that was clicked and calls the "changeMarker" function.
 const addMarker = (id) => {
@@ -44,23 +51,74 @@ const addMarker = (id) => {
   console.log(`Therefore, a  "${currentMarker}"  should be placed in the square with the id:  ${id}`)
 
   // @TODO-2: Build a line of code that will set the innerHTML property of the element that was clicked to the "currentMarker"
+  // I used getElementbyId b/c id was passed into the function as a parameter
 
   // @TODO-2.5: MIX & MATCH, You will need the following pieces of code to build that line:
   // = currentMarker
   // .getElementById(id)
   // document
   // .innerHTML 
 
-  changeMarker()
-}
-
+  document.getElementById(id).innerHTML = currentMarker;
 
+  const row = parseInt(id.charAt(0))
+  const column = parseInt(id.charAt(2))
+  board[row][column] = currentMarker
 
+  checkForWin()
 
+}
 
+const checkForWin = () => {
+  if(horizontalWin() || verticalWin() || diagonalWin()) {
+    window.alert(`Player ${currentMarker} won!`)
+  } else {
+    changeMarker()
+  }
+}
 
+const horizontalWin = () => {
+  // Your code here to check for horizontal wins
+  if ((board[0][0] == "X" && board[0][1] == "X" && board[0][2] == "X") 
+  || (board[0][0] == "O" && board[0][1] == "O" && board[0][2] == "O")
+  || (board[1][0] == "X" && board[1][1] == "X" && board[1][2] == "X")
+  || (board[1][0] == "O" && board[1][1] == "O" && board[1][2] == "O")
+  || (board[2][0] == "X" && board[2][1] == "X" && board[2][2] == "X")
+  || (board[2][0] == "O" && board[2][1] == "O" && board[2][2] == "O")
+  ) {
+    return true
+  } else {
+    return false
+  }
+}
 
+const verticalWin = () => {
+  // Your code here to check for vertical wins
+  if ((board[0][0] == "X" && board[1][0] == "X" && board[2][0] == "X") 
+  || (board[0][0] == "O" && board[1][0] == "O" && board[2][0] == "O")
+  || (board[0][1] == "X" && board[1][1] == "X" && board[2][1] == "X")
+  || (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O")
+  || (board[0][2] == "X" && board[1][2] == "X" && board[2][2] == "X")
+  || (board[0][2] == "O" && board[1][2] == "O" && board[2][2] == "O")
+  ) {
+    return true
+  } else {
+    return false
+  }
+}
 
+const diagonalWin = () => {
+  // Your code here to check for diagonal wins
+  if ((board[0][0] == "X" && board[1][1] == "X" && board[2][2] == "X") 
+  || (board[0][0] == "O" && board[1][1] == "O" && board[2][2] == "O")
+  || (board[0][2] == "X" && board[1][1] == "X" && board[2][0] == "X")
+  || (board[0][2] == "O" && board[1][1] == "O" && board[2][0] == "O")
+  ) {
+    return true
+  } else {
+    return false
+  }
+}
 
 
 // This "changeMarker" function changes "X" to "O" in the "currentMarker" variable or "O" to "X"
@@ -86,7 +144,9 @@ const resetBoard = () => {
 
   // @TODO-3: To make your "Restart" button work you'll need to build a line of code here that:
       // collects all of the "td" elements into an HTML Collection: https://www.w3schools.com/jsref/dom_obj_htmlcollection.asp  
-
+
+  const squares = document.getElementsByTagName("TD");    
+
   // @TODO-3.5: MIX & MATCH, You will need the following pieces of code to build that line:
   // squares
   // .getElementsByTagName("TD")
@@ -103,4 +163,6 @@ const resetBoard = () => {
     // sets the innerHTML to null to replace the "X" or "O"
     squares[i].innerHTML = null
   }  
+
+  board = [["", "", ""], ["", "", ""], ["", "", ""]]
 }