GUI Added

dom-tictactoe.js

@@ -14,11 +14,15 @@ let board = [
   ['','',''],
   ['','','']
 ];
+let scoreX = 0;
+let scoreO =0;
 
 // 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
+  document.getElementById("score").innerHTML = `X has ${scoreX} wins and O has ${scoreO} wins.`;
+  document.getElementById("turn").innerHTML = `${currentMarker} it is your turn`;
   if(!document.getElementById(element.id).innerHTML){
     addMarker(element.id)
     updateBoard(element.id)
@@ -38,6 +42,10 @@ const addMarker = (id) => {
 
   // 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.
+
+
+  document.getElementById(id).innerHTML = currentMarker;
+
 }
 
 // passes the element's id attribute from HTML to be used
@@ -51,13 +59,21 @@ 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!`);
+    if(currentMarker === 'X'){
+      scoreX++;
+    } else { scoreO++; }
+    if(window.confirm(`Player ${currentMarker} won!`)); {
+      resetBoard();
+    }
   } else {
     // if no win, change the marker from X to O, or O to X for the next player.
     changeMarker()
@@ -66,19 +82,83 @@ const checkForWin = () => {
 
 const horizontalWin = () => {
   // @TODO, Your code here: to check for horizontal wins
+  // if(board[0][0] !== null){
+  //   console.log("Not Null");
+  // }
+  if(board[0][0] === board[0][1] && board[0][0] === board[0][2]){
+    //console.log("h1a")
+    //debugger
+    if(board[0][0] == 'X' || board[0][0] == "O"){
+      //console.log("H1")
+      return true;
+    }
+  }
+  else if(board[1][0] === board[1][1] && board[1][0] === board[1][2]){
+    if(board[1][0] == "X" || board[1][0] == "O"){
+      //console.log("H2")
+      return true;
+    }
+  }
+  else if(board[2][0] === board[2][1] && board[2][0] === board[2][2]){
+    if(board[2][0] == "X" || board[2][0] == "O"){
+     // console.log("H3")
+      return true;
+    }
+  }
+  else {
+    return false;
+  }
 }
 
 const verticalWin = () => {
   // @TODO, Your code here: to check for vertical wins
+  if(board[0][0] === board[1][0] && board[0][0] === board[2][0]){
+    if(board[0][0] == "X" || board[0][0] == "O"){
+      //console.log("V1")
+      return true;
+    }
+  }
+  else if(board[0][1] === board[1][1] && board[0][1] === board[2][1]){
+    if(board[0][1] == "X" || board[0][1] == "O"){
+      //console.log("V2")
+      return true;
+    }
+  }
+  else if(board[0][2] === board[1][2] && board[0][2] === board[2][2]){
+    if(board[0][2] == "X" || board[0][2] == "O"){
+     // console.log("V3")
+      return true;
+    }
+  }
+  else {
+    return false;
+  }
 }
 
 const diagonalWin = () => {
   // @TODO, Your code here: to check for diagonal wins
+  if(board[0][0] === board[1][1] && board[0][0] === board[2][2]){
+    if(board[0][0] == "X" || board[0][0] == "O"){
+     // console.log("D1")
+      return true;
+    }
+  }
+  else if(board[0][2] === board[1][1] && board[0][2] === board[2][0]){
+    if(board[0][2] == "X" || board[0][2] == "O"){
+     // console.log("D2")
+      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"
+  document.getElementById("turn").innerHTML = `${currentMarker} it is your turn`;
+
 }
 
 const resetBoard = () => {
@@ -95,8 +175,20 @@ const resetBoard = () => {
   }
 
   // @TODO, Your code here: make sure to reset the array of arrays to empty for a new game
+  board = [
+    ['','',''],
+    ['','',''],
+    ['','','']
+  ];
+
+  document.getElementById("score").innerHTML = `X has ${scoreX} wins and O has ${scoreO} wins.`;
 }
 
+const resetScore = () => {
+  scoreX = 0;
+  scoreO = 0;
+  document.getElementById("score").innerHTML = `X has ${scoreX} wins and O has ${scoreO} wins.`;
+}
 // **BONUSES**
 
 // 1. Display the current player's turn

index.html

@@ -13,9 +13,11 @@
     <div class="container">
       <div class="jumbotron">
         <h1>Welcome to Tic Tac Toe</h1>
-        <p>Get ready to play!</p>
+        <p id="turn">Get ready to play!</p>
+        <!-- <p id="turn"></p> -->
+        <p id="score">X has 0 wins and O has 0 wins.</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>
+        <button onclick="resetBoard(); resetScore();" type="button" class="btn btn-primary btn-lg" name="button">Restart</button>
       </div>
 
       <table align="center">

main.js

@@ -32,25 +32,100 @@ const printBoard = () => {
   console.log('2 ' + board[2].join(' | '));
 }
 
+const resetBoard = () => {
+  board = [
+    [' ', ' ', ' '],
+    [' ', ' ', ' '],
+    [' ', ' ', ' ']
+  ];
+}
+
 const horizontalWin = () => {
   // Your code here to check for horizontal wins
+  if(board[0][0] === board[0][1] && board[0][0] === board[0][2]){
+    return true;
+  }
+  else if(board[1][0] === board[1][1] && board[1][0] === board[1][2]){
+    return true;
+  }
+  else if(board[2][0] === board[2][1] && board[2][0] === board[2][2]){
+    return true;
+  }
+  else {
+    return false;
+  }
 }
 
 const verticalWin = () => {
   // Your code here to check for vertical wins
+  if(board[0][0] === board[1][0] && board[0][0] === board[2][0]){
+    //if(board[0][0] == "X" || board[0][0] == "O"){
+      return true;
+   // }
+  }
+  else if(board[0][1] === board[1][1] && board[0][1] === board[2][1]){
+    return true;
+  }
+  else if(board[0][2] === board[1][2] && board[0][2] === board[2][2]){
+    return true;
+  }
+  else {
+    return false;
+  }
 }
 
 const diagonalWin = () => {
   // Your code here to check for diagonal wins
+  if(board[0][0] === board[1][1] && board[0][0] === board[2][2]){
+    return true;
+  }
+  else if(board[0][2] === board[1][1] && board[0][2] === board[2][0]){
+    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(`Winner! ${playerTurn}`)
+    //resetBoard();
+    return true;
+  }
+  else {
+    return false;
+  }
+}
+
+const changeMarker = () => {
+  // ternary operator: if it's an X make it an O, if O make it an X
+  playerTurn = playerTurn === "X" ? "O" : "X"
+}
+
+const validInput = (input) => {
+  if (input == 0 || input == 1 || input == 2) {
+    return true;
+  }
+  else {
+    console.log( "Invaild Input!  Please choose 0, 1, or 2")
+    return false;
+  }
 }
 
 const ticTacToe = (row, column) => {
   // Your code here to place a marker on the board
   // then check for a win
+  if (validInput(row) && validInput(column)){
+    board[row][column] = playerTurn;
+    checkForWin();
+    changeMarker();
+  }
+  else {
+    getPrompt();
+  }
 }
 
 const getPrompt = () => {