diff --git a/index.html b/index.html
index 19d0dee..b317359 100644
--- a/index.html
+++ b/index.html
@@ -19,9 +19,21 @@ Welcome to Tic Tac Toe
- |
- |
- |
+ |
+ |
+ |
+
+
+
+ |
+ |
+ |
+
+
+
+ |
+ |
+ |
diff --git a/scripts.js b/scripts.js
index ba09e74..42020a1 100644
--- a/scripts.js
+++ b/scripts.js
@@ -1,26 +1,30 @@
-// ***********************
-// INSTRUCTIONS
-// ***********************
-// 1. Read the code below one block at a time.
-// 2. Look for the @TODOs, and figure out how to fix them.
- // next to each @TODO you will find tasks that need to be finished
-
-// The variable will change from X to O based on what player turn it is. We need to hold this so we can place an X or O on the board when they're clicked.
let currentMarker = 'X'
+let board = [
+ ["", "", ""], // <-- Row 1, index 0
+ ["", "", ""], // <-- Row 2, index 1
+ ["", "", ""] // <-- Row 3, index 2
+]
+checkForWin = () => {
+ if (horizontalWin() || verticalWin() || diagonalWin()){
+ window.alert(`Player ${currentMarker} Wins!`)
+ resetBoard()
+ }
+ else {
+ changeMarker()
+ }
+}
-// this "handleClick" function is called when a box is clicked. Here, "element" will hold the same value as "this" does in the HTML.
-// "this" is a special word in JS but "element" could have been "thing" or "el" or whatever we wanted it to be as long as we use it again in the "console.log" statement
+
const handleClick = (element) => {
- // this uses the "log" method on the "console" to log out the element's id so we can see it with our human eyes
+
console.log(`The element you clicked on has an id: ${element.id}`)
- // this next line prevents an X being changed to an O or an O being changed to an X by...
- // checking to see if the square clicked has anything in it, if not continue
+
if(!document.getElementById(element.id).innerHTML){
addMarker(element.id)
}
@@ -29,13 +33,6 @@ const handleClick = (element) => {
-
-
-
-
-
-
-
// this function places the "currentMarker" inside the HTML element that was clicked and calls the "changeMarker" function.
const addMarker = (id) => {
@@ -43,22 +40,18 @@ const addMarker = (id) => {
console.log(`*** The current marker is: ${currentMarker}. ***`)
console.log(`Therefore, a "${currentMarker}" should be placed in the square with the id: ${id}`)
- // @TODO-2: Build a line of code that will set the innerHTML property of the element that was clicked to the "currentMarker"
-
- // @TODO-2.5: MIX & MATCH, You will need the following pieces of code to build that line:
- // = currentMarker
- // .getElementById(id)
- // document
- // .innerHTML
-
- changeMarker()
-}
-
+ document.getElementById(id).innerHTML = currentMarker
+ const row = parseInt(id.charAt(0))
+ const column = parseInt(id.charAt(2))
+ board[row][column] = currentMarker;
+ checkForWin()
+
+}
@@ -67,35 +60,25 @@ const addMarker = (id) => {
const changeMarker = () => {
if(currentMarker === "X"){
currentMarker = "O"
- } else {
+ }
+
+ else {
currentMarker = "X"
}
+
}
-
-
-
-
-
-
-
// This "resetBoard" function is called when the user clicks on the "Restart" button.
const resetBoard = () => {
- // @TODO-3: To make your "Restart" button work you'll need to build a line of code here that:
- // collects all of the "td" elements into an HTML Collection: https://www.w3schools.com/jsref/dom_obj_htmlcollection.asp
-
- // @TODO-3.5: MIX & MATCH, You will need the following pieces of code to build that line:
- // squares
- // .getElementsByTagName("TD")
- // =
- // document
- // const
+
+ const squares = document.getElementsByTagName("TD")
+
// loops over the HTML Collection of TDs and clears out the Xs and Os
- for (i=0; i < squares.length; i++) {
+ for (let i=0; i < squares.length; i++) {
// will log out the id of each square as it loops over them.
console.log(squares[i].id)
@@ -103,4 +86,76 @@ const resetBoard = () => {
// sets the innerHTML to null to replace the "X" or "O"
squares[i].innerHTML = null
}
-}
\ No newline at end of file
+
+ location.reload()
+ 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;
+ }
+
+}
+
+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;
+}
+
+
+}
+
+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][0] == "X")
+ || (board[0][2] == "O" && board[1][1] == "O" && board[2][0] == "O")){
+ return true;
+}
+
+else {
+ return false;
+}
+
+
+}
+