completed Guis

dom-tictactoe.js

@@ -26,6 +26,10 @@ const handleClick = (element) => {
   }
 }
 
+const showCurrentTurn = () => {
+  document.getElementById("turn").innerHTML=('It is ${currentMarker} turn')
+}
+
 const addMarker = (id) => {
   console.log(`We'll place a mark on square: ${id}`)
   // @TODO, Mix & Match. 
@@ -35,7 +39,7 @@ const addMarker = (id) => {
   // .getElementById(id)
   // document
   // .innerHTML 
-
+  document.getElementById(id).innerHTML=currentMarker
   // Arrange the above pieces into one a single line of code
   // to add an X or O to the board to the DOM so it can be scene on the screen.
 }
@@ -51,28 +55,63 @@ const updateBoard = (id) => {
 
   // @TODO, Your code here: use the above information to change the board variable(array of arrays)
   // HINT: in your browser open up the dev tools -> console
+  board[row][column] = currentMarker
 }
 
 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!`)
+    window.alert(`Player ${currentMarker} won!`);
+    window.addEventListener("close", resetBoard());
   } else {
     // if no win, change the marker from X to O, or O to X for the next player.
     changeMarker()
   }
 }
 
 const horizontalWin = () => {
+  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
+  }
   // @TODO, Your code here: to check for horizontal wins
 }
 
 const verticalWin = () => {
+  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
+}
   // @TODO, Your code here: to check for vertical wins
 }
 
 const diagonalWin = () => {
+  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][1] == "X") 
+  || (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O")){
+    return true
+  } else {
+    return false
+  }
   // @TODO, Your code here: to check for diagonal wins
 }
 
@@ -95,6 +134,11 @@ const resetBoard = () => {
   }
 
   // @TODO, Your code here: make sure to reset the array of arrays to empty for a new game
+   board = [
+    ['','',''],
+    ['','',''],
+    ['','','']
+  ];
 }
 
 // **BONUSES**

index.html

@@ -14,10 +14,12 @@
       <div class="jumbotron">
         <h1>Welcome to Tic Tac Toe</h1>
         <p>Get ready to play!</p>
+
         <!-- uses the built-in onclick attribute to call the resetBoard function -->
         <button onclick="resetBoard()" type="button" class="btn btn-primary btn-lg" name="button">Restart</button>
+
       </div>
-
+      <h2 id="turn"></h2>
       <table align="center">
         <tr>
           <!-- Each table-data (td) has an id that matches it's position in the array or arrays [0][1] -->

main.js

@@ -9,6 +9,7 @@ const rl = readline.createInterface({
   input: process.stdin,
   output: process.stdout
 });
+//start here//
 
 // creates and empty "board" for the user to see where marks can be placed.
 // using let because the variable is expected to change with more 'X's and 'O's to add
@@ -21,6 +22,16 @@ let board = [
 // assigns the first mark as 'X'
 // using let because the variable is expected to change from 'X' to 'O' and back
 let playerTurn = 'X';
+let turn = 0;
+
+
+const changeMarker = () => {
+  if(playerTurn === "X"){
+    playerTurn = "O"
+  } else {
+    playerTurn = "X"
+  }
+}
 
 // is a function that print the current status of the board using the variable - board
 const printBoard = () => {
@@ -33,26 +44,111 @@ const printBoard = () => {
 }
 
 const horizontalWin = () => {
+  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" && boar0d[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
+  }
+
+  // it('should check for horizontal wins', () => {
+  //   board = [ ['X', 'X', 'X'], [' ', ' ', ' '], [' ', ' ', ' '] ];
+  //   assert.equal(horizontalWin(), true);
+  // });
   // Your code here to check for horizontal wins
 }
 
 const verticalWin = () => {
+  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
+}
+
+  // it('should check for vertical wins', () => {
+  //   board = [ [' ', 'X', ' '], [' ', 'X', ' '], [' ', 'X', ' '] ];
+  //   assert.equal(verticalWin(), true);
+  // });
   // Your code here to check for vertical wins
 }
 
 const diagonalWin = () => {
+  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][1] == "X") 
+  || (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O")){
+    return true
+  } else {
+    return false
+  }
+  // it('should check for diagonal wins', () => {
+  //   board = [ ['X', ' ', ' '], [' ', 'X', ' '], [' ', ' ', 'X'] ];
+  //   assert.equal(diagonalWin(), true);
+  // });
   // Your code here to check for diagonal wins
 }
 
-const checkForWin = () => {
-  // Your code here call each of the check for types of wins
-}
+
 
 const ticTacToe = (row, column) => {
   // Your code here to place a marker on the board
+  board[row][column] = playerTurn
+
+  changeMarker()
+  if (turn >=4){
+    checkForWin()
+  } else {
+    turn++;
+  }
+
+}
+  // it('should place mark on the board', () => {
+  //   ticTacToe(1, 1);
+  //   assert.deepEqual(board, [ [' ', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' '] ]);
+  // });
+  // it('should alternate between players', () => {
+  //   ticTacToe(0, 0);
+  //   assert.deepEqual(board, [ ['O', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' '] ]);
+  // });
+
+ const checkForWin = () => {
+  if(horizontalWin() || verticalWin() || diagonalWin()){
+    console.log(`Player ${playerTurn} won!`)
+    return true
+  } else {
+    ticTacToe()
+  }
+
+
+
+
   // then check for a win
+
+
+
+
+
+  // it('should detect a win', () => {
+  //   assert.equal(checkForWin(), true);
+  // });
+  // Your code here call each of the check for types of wins
 }
 
+
 const getPrompt = () => {
   printBoard();
   console.log("It's Player " + playerTurn + "'s turn.");
@@ -92,11 +188,16 @@ if (typeof describe === 'function') {
       assert.equal(diagonalWin(), true);
     });
     it('should detect a win', () => {
+      ticTacToe(0, 0)
+      ticTacToe(0, 1)
+      ticTacToe(1, 1)
+      ticTacToe(0, 2)
+      ticTacToe(2, 2)
       assert.equal(checkForWin(), true);
     });
   });
 } else {
 
   getPrompt();
 
-}
+}

tictactoe.css

@@ -5,3 +5,7 @@ td{
   border: 5px solid black;
   font-size: 100px;
 }
+
+.turn {
+  height: 60px;
+}