creating pull request

dom-tictactoe.js

@@ -8,18 +8,18 @@
 // next to each @TODO you will find tasks that need to be finished
 // 4. GET THIS GAME WORKING!!
 
-let currentMarker = 'X'
+let currentMarker = "X"
 let board = [
-  ['','',''],
-  ['','',''],
-  ['','','']
+  ['', '', ''],
+  ['', '', ''],
+  ['', '', '']
 ];
 
 // is called when a square is clicked. "this" = element here
 const handleClick = (element) => {
   // check to see if the square clicked has anything in it, if not continue
   // this prevents an X being changed to an O
-  if(!document.getElementById(element.id).innerHTML){
+  if (!document.getElementById(element.id).innerHTML) {
     addMarker(element.id)
     updateBoard(element.id)
     checkForWin()
@@ -30,21 +30,24 @@ const addMarker = (id) => {
   console.log(`We'll place a mark on square: ${id}`)
   // @TODO, Mix & Match. 
   // You will need the following pieces:
-  
+
   // = currentMarker
   // .getElementById(id)
   // document
   // .innerHTML 
-
-  // Arrange the above pieces into one a single line of code
+  document.getElementById(id).innerHTML = currentMarker
+
   // to add an X or O to the board to the DOM so it can be scene on the screen.
 }
 
 // passes the element's id attribute from HTML to be used
 const updateBoard = (id) => {
   // parses the id string into a number then captures the first and last part the newly create number as row & column
   const row = parseInt(id.charAt(0))
-  const column = parseInt(id.charAt(2)) 
+  const column = parseInt(id.charAt(2))
+  console.log("handleclick", currentMarker)
+  board[row][column] = currentMarker
+
 
   console.log(`you clicked the sq at ${row} and ${column}`)
   console.log(board)
@@ -55,9 +58,15 @@ const updateBoard = (id) => {
 
 const checkForWin = () => {
   // calls each checkForWin possibility and if any are true gives a page alert,
-  if(horizontalWin() || verticalWin() || diagonalWin()) {
-    // **BONUS** you could make the dismissal of this alert window reset the board...
-    window.alert(`Player ${currentMarker} won!`)
+
+  if (horizontalWin() || verticalWin() || diagonalWin()) {
+
+    // **BONUS** you could make the dismissal of this alert window reset the board.. 
+    setTimeout(
+      function () {
+        window.alert(`Player ${currentMarker} won!`);
+      }, 10)
+    // console.log ("after alert", currentMarker)
   } else {
     // if no win, change the marker from X to O, or O to X for the next player.
     changeMarker()
@@ -66,19 +75,45 @@ const checkForWin = () => {
 
 const horizontalWin = () => {
   // @TODO, 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")) {
+    return true
+  } else if ((board[1][0] == "X" && board[1][1] == "X" && board[1][2] == "X") || (board[1][0] == "O" && board[1][1] == "O" && board[1][2] == "O")) {
+    return true
+  } else if ((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 = () => {
   // @TODO, 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")) {
+    return true
+  } else if ((board[0][1] == "X" && board[1][1] == "X" && board[2][1] == "X") || (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O")) {
+    return true
+  } else if ((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 = () => {
   // @TODO, 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")) {
+    return true
+  } else if ((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
+  }
 }
 
 const changeMarker = () => {
   // ternary operator: if it's an X make it an O, if O make it an X
   currentMarker = currentMarker === "X" ? "O" : "X"
+
 }
 
 const resetBoard = () => {
@@ -87,14 +122,19 @@ const resetBoard = () => {
 
   // collects all of the "td"s into an HTML Collection: https://www.w3schools.com/jsref/dom_obj_htmlcollection.asp  
   const squares = document.getElementsByTagName("TD")
-  
+
   // loops over the HTML Collections and clears out the Xs and Os
-  for (i=0; i<squares.length; i++) {
+  for (i = 0; i < squares.length; i++) {
     console.log(squares[i])
     squares[i].innerHTML = null
   }
-  
+
   // @TODO, Your code here: make sure to reset the array of arrays to empty for a new game
+  board = [
+    ["", "", ""],
+    ["", "", ""],
+    ["", "", ""]
+  ]
 }
 
 // **BONUSES**

index.html

@@ -7,7 +7,6 @@
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <link rel="stylesheet" href="tictactoe.css">
     <!-- link to JavaScript code -->
-    <script src="dom-tictactoe.js"></script>
   </head>
   <body>
     <div class="container">
@@ -38,5 +37,6 @@ <h1>Welcome to Tic Tac Toe</h1>
         </tr>
       </table>
     </div>
+    <script src="dom-tictactoe.js"></script>
   </body>
 </html>

main.js

@@ -33,24 +33,60 @@ const printBoard = () => {
 }
 
 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")){
+    return true
+      } else if ((board[1][0] == "X" && board[1][1] == "X" && board[1][2] == "X") || (board[1][0] == "O" && board[1][1] == "O" && board[1][2] == "O")){
+          return true
+          } else if ((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")){
+    return true
+      } else if ((board[0][1] == "X" && board[1][1] == "X" && board[2][1] == "X") || (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O")){
+          return true
+            } else if ((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")){
+    return true
+      } else if ((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
+          }
 }
 
 const checkForWin = () => {
-  // Your code here call each of the check for types of wins
+  if(horizontalWin() || verticalWin() || diagonalWin()) {
+    console.log(`Player ${playerTurn} won!`)
+    return true
+  } else {
+    changeMarker()
+  }
 }
 
 const ticTacToe = (row, column) => {
-  // Your code here to place a marker on the board
-  // then check for a win
+  board[row][column] = playerTurn 
+
+  checkForWin()
+}
+
+const changeMarker = () => {
+  if(playerTurn === "X"){
+    playerTurn = "O"
+  } else {
+    playerTurn = "X"
+  }
 }
 
 const getPrompt = () => {
@@ -64,7 +100,6 @@ const getPrompt = () => {
   });
 }
 
-
 // Unit Tests
 // You use them run the command: npm test main.js
 // to close them ctrl + C