Resilient-Labs · kezthom · Oct 16, 2023
diff --git a/tic-tac-toe/index.html b/tic-tac-toe/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+    	<meta charset="utf-8">
+    	<meta name="description" content="This is where your description goes">
+    	<meta name="keywords" content="one, two, three">
+
+		<title>Tic-Tac-Toe</title>
+        <link rel="stylesheet" href="style.css">
+	</head>
+	<body>
+
+		<h1>Tic-Tac-Toe</h1>
+        <section>
+            <!-- <h2>WINS</h2>
+            <h3>User X: <span id=winsX>  </span> User O: <span id=winsO>  </span></h3>
+            <h3 class="x o">Your Move<span id=cplayer></span></h3> -->
+            <h4 class="announcement"></h4>
+        </section>
+
+        <table id="tic-tac-toe-board">
+            <tr>
+              <td class="cell" id="cell1"></td>
+              <td class="cell" id="cell2"></td>
+              <td class="cell" id="cell3"></td>
+            </tr>
+            <tr>
+                <td class="cell" id="cell4"></td>
+                <td class="cell" id="cell5"></td>
+                <td class="cell" id="cell6"></td>
+            </tr>
+            <tr>
+                <td class="cell" id="cell7"></td>
+                <td class="cell" id="cell8"></td>
+                <td class="cell" id="cell9"></td>
+              </tr>
+          </table>
+
+		<script type="text/javascript" src="main.js"></script>
+	</body>
+</html>
diff --git a/tic-tac-toe/main.js b/tic-tac-toe/main.js
@@ -0,0 +1,135 @@
+
+// Get all elements with the class "cell"
+const cells = document.querySelectorAll('.cell');
+let board = Array.from(cells); // turns html elements into array
+
+
+
+// Current player
+let currentPlayer = "X"
+
+// Add a click event listener to each cell
+cells.forEach(cell => {
+  cell.addEventListener('click', (e) => {
+    const cellId = e.target.id;
+    console.log(cellId)
+    handleMove(cellId); // Pass the cell's id to your handleMove function
+  });
+});
+
+function handleMove(cellId) { /// Place the current player's symbol in the selected cell
+    console.log('handleMoves works')
+    const cell = document.getElementById(cellId);
+
+    if (cell.innerText === '') { // Check if the cell is empty
+    cell.innerText = currentPlayer;  // Place the current player's symbol in the selected cell
+    console.log(currentPlayer + `is at ${cellId}`)
+
+    // Check for a win condition
+    if (checkForWin(currentPlayer)) { 
+        declareWinner(currentPlayer);
+    }else if (isBoardFull()) { // Declare a draw if the board is full
+       declareDraw()
+    }else { // Switch to the other player for the next turn
+        if(currentPlayer=='X'){
+            currentPlayer = 'O'
+        }else if(currentPlayer == "O"){
+            currentPlayer = "X"
+        }
+        console.log(board)
+    }
+    }
+
+
+}  
+
+// check if there's a win condition  
+function checkForWin(currentPlayer) { 
+//       // Check for a win in rows, columns, and diagonals
+ if (
+    checkRows(currentPlayer) ||
+     checkColumns(currentPlayer) ||
+     checkDiagonals(currentPlayer)
+){
+     return true; // The current player has won
+  }else{
+   return false; // No win yet
+  }
+}
+
+function checkRows() {
+    if (cells[0].innerText == currentPlayer &&
+        cells[1].innerText == currentPlayer &&
+        cells[2].innerText == currentPlayer || // ROW 1
+        cells[3].innerText == currentPlayer &&
+        cells[4].innerText == currentPlayer &&
+        cells[5].innerText == currentPlayer|| //ROW 2
+        cells[6].innerText == currentPlayer &&
+        cells[7].innerText == currentPlayer &&
+        cells[8].innerText == currentPlayer) { // ROW 3
+      return true; // Win in this row
+    }else{
+        return false; // No win in any row
+    }
+
+}
+
+function checkColumns() {
+
+     if (cells[0].innerText == currentPlayer &&
+        cells[3].innerText == currentPlayer &&
+        cells[6].innerText == currentPlayer || //C 1
+        cells[1].innerText == currentPlayer &&
+        cells[4].innerText == currentPlayer &&
+        cells[7].innerText == currentPlayer || //C2
+        cells[2].innerText == currentPlayer &&
+        cells[5].innerText == currentPlayer &&
+        cells[8].innerText == currentPlayer) { //C3
+      return true; // Win in this column
+    }else{
+        return false; // No win in any column
+    }
+}
+
+function checkDiagonals() {
+  if (cells[0].innerText == currentPlayer &&
+    cells[4].innerText == currentPlayer &&
+    cells[8].innerText == currentPlayer|| // Left to Right
+    cells[2].innerText == currentPlayer &&
+    cells[4].innerText == currentPlayer &&
+    cells[6].innerText == currentPlayer) { // Right to Left
+    return true; // Win in either diagonal
+  }else{
+    return false; // No win in diagonals
+  }
+
+}
+
+// check if the board is full
+function isBoardFull() {
+    console.log('isBoardFull works')
+    for (const cell of cells) {
+        if (cell.innerText === '') {
+            return false; // There is an empty cell, so the board is not full
+        }
+    }
+    return true; // All cells are filled
+
+}
+
+
+// declare a winner
+function declareWinner() {  
+    console.log('declareWinner works')
+    document.querySelector('.announcement').innerText =`The winner is ${currentPlayer}`
+}
+
+// declare a draw
+function declareDraw() { 
+    console.log('declareDraw works')
+    document.querySelector('.announcement').innerText ="There is a draw"
+}
+
+
+
+
diff --git a/tic-tac-toe/style.css b/tic-tac-toe/style.css
@@ -0,0 +1,5 @@
+td{
+    border: 1px solid black;
+    height: 200px;
+    width: 200px;
+}