Tic tac toe first branch

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "liveServer.settings.port": 5501
+  "liveServer.settings.port": 5502
 }

dom-tictactoe.js

@@ -8,99 +8,129 @@
 // 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){
-    addMarker(element.id)
-    updateBoard(element.id)
-    checkForWin()
+  if (!document.getElementById(element.id).innerHTML) {
+    addMarker(element.id);
+    updateBoard(element.id);
+    checkForWin();
+
+    let cell = document.getElementById(element.id);
+    cell.innerHTML === "X"
+      ? (cell.style.color = "springgreen")
+      : (cell.style.color = "orange");
   }
-}
+};
 
 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
-  // 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;
+};
+
+const changeMarker = () => {
+  currentMarker = currentMarker === "X" ? "O" : "X";
+};
 
 // 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)) 
-
-  console.log(`you clicked the sq at ${row} and ${column}`)
-  console.log(board)
-
-  // @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
-}
+  const row = parseInt(id.charAt(0));
+  const column = parseInt(id.charAt(2));
+  board[row][column] = currentMarker;
+};
 
 const checkForWin = () => {
   // calls each checkForWin possibility and if any are true gives a page alert,
-  if(horizontalWin() || verticalWin() || diagonalWin()) {
+  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!`);
   } else {
     // if no win, change the marker from X to O, or O to X for the next player.
-    changeMarker()
+    changeMarker();
   }
-}
+};
 
 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
-}
-
-const changeMarker = () => {
-  // ternary operator: if it's an X make it an O, if O make it an X
-  currentMarker = currentMarker === "X" ? "O" : "X"
-}
+  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[2][0] == "X" && board[1][1] == "X" && board[2][0] == "X") ||
+    (board[2][0] == "O" && board[1][1] == "O" && board[2][0] == "O")
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+};
 
 const resetBoard = () => {
-  // sanity check: this tells us the function is being called
-  console.log("the board was cleared!")
-
-  // 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++) {
-    console.log(squares[i])
-    squares[i].innerHTML = null
+  const squares = document.getElementsByTagName("TD");
+  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**
 
 // 1. Display the current player's turn
 // 2. Count number of wins for each player and display them
 // 3. Reset the number of wins
 // 4. Clear the board on alert window dismissal
-// 5. Add players names and display who wins, i.e. "Congrats Emily, you won with 0s!"
+// 5. Add players names and display who wins, i.e. "Congrats Emily, you won with 0s!"

index.html

@@ -1,40 +1,52 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Tic Tac Toe</title>
     <!--bootstrap & style links -->
-    <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
+      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">
       <div class="jumbotron">
-        <h1>Welcome to Tic Tac Toe</h1>
+        <h1>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>
+        <button
+          onclick="resetBoard()"
+          type="button"
+          class="btn btn-primary btn-lg"
+          name="button"
+        >
+          Restart
+        </button>
       </div>
 
       <table align="center">
         <tr>
           <!-- Each table-data (td) has an id that matches it's position in the array or arrays [0][1] -->
-          <td id='0-0' onclick="handleClick(this)" ></td>
-          <td id='0-1' onclick="handleClick(this)" ></td>
-          <td id='0-2' onclick="handleClick(this)" ></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>
         <tr>
           <!-- onclick calls a function called handleClick and passes itself to it("this") -->
-          <td id='1-0' onclick="handleClick(this)" ></td>
-          <td id='1-1' onclick="handleClick(this)" ></td>
-          <td id='1-2' onclick="handleClick(this)" ></td>
+          <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>
+          <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>