From e8704a1f3964d7df779488d2194b97a6512ba25f Mon Sep 17 00:00:00 2001 From: chrisstrom1 Date: Sat, 22 Jul 2023 12:46:38 -0500 Subject: [PATCH 1/6] just a test --- test.html | 1 + 1 file changed, 1 insertion(+) create mode 100644 test.html diff --git a/test.html b/test.html new file mode 100644 index 0000000..52a9ad5 --- /dev/null +++ b/test.html @@ -0,0 +1 @@ +

hello world

\ No newline at end of file From de8303ee4af1e3d4e0210db6ecd342acf52f5100 Mon Sep 17 00:00:00 2001 From: chrisstrom1 Date: Sat, 22 Jul 2023 12:48:56 -0500 Subject: [PATCH 2/6] test --- test.html | 1 - 1 file changed, 1 deletion(-) delete mode 100644 test.html diff --git a/test.html b/test.html deleted file mode 100644 index 52a9ad5..0000000 --- a/test.html +++ /dev/null @@ -1 +0,0 @@ -

hello world

\ No newline at end of file From c95b45a43d93dd3810f04298c10b61b166e76700 Mon Sep 17 00:00:00 2001 From: chrisstrom1 Date: Sat, 22 Jul 2023 13:30:03 -0500 Subject: [PATCH 3/6] test --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9174595..fb20e28 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ 1. After you have a general understanding find the `// @TODO` comments and fix the problems described. 1. Go to the HTML file and create all the rows you need for a complete Tic Tac Toe board. 1. When you've finished create a Pull Request (*PR*) on the original repo and turn in the URL of that PR. - +1. could not find error. ******* ## Follow-Up Video From 4b1c7d17897eb17ec7e54b07aec13a88ab9f6f59 Mon Sep 17 00:00:00 2001 From: chrisstrom1 Date: Wed, 2 Aug 2023 20:59:30 -0500 Subject: [PATCH 4/6] first --- index.html | 19 +++++++++++++++---- scripts.js | 11 +++-------- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 19d0dee..8ceb522 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ +
@@ -19,10 +20,20 @@

Welcome to Tic Tac Toe

- - - - + + + +
+ + +
+ + + +
+ + +
diff --git a/scripts.js b/scripts.js index ba09e74..ef62af5 100644 --- a/scripts.js +++ b/scripts.js @@ -7,6 +7,8 @@ // 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. +Array("", "", "", ) + let currentMarker = 'X' @@ -14,7 +16,7 @@ let currentMarker = 'X' // 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) => { +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}`) @@ -24,13 +26,6 @@ const handleClick = (element) => { if(!document.getElementById(element.id).innerHTML){ addMarker(element.id) } -} - - - - - - From 948feb5c6b1a37dea239628bf281c3053ad0ffba Mon Sep 17 00:00:00 2001 From: chrisstrom1 Date: Sat, 5 Aug 2023 13:04:02 -0500 Subject: [PATCH 5/6] latest commit1 --- index.html | 23 +++++++++--------- scripts.js | 67 +++++++++++++++++++++++++++++++++++++++------------ tictactoe.css | 5 ++-- 3 files changed, 67 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index 8ceb522..4611cc2 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - + @@ -20,19 +20,20 @@

Welcome to Tic Tac Toe

- + + + - + + - + + + + diff --git a/scripts.js b/scripts.js index ef62af5..fb147c1 100644 --- a/scripts.js +++ b/scripts.js @@ -7,7 +7,11 @@ // 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. -Array("", "", "", ) +let board = [ + ["", "", ""], + ["", "", ""], + ["", "", ""] +] let currentMarker = 'X' @@ -16,7 +20,9 @@ let currentMarker = 'X' // 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) => +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}`) @@ -26,33 +32,33 @@ const handleClick = (element) => if(!document.getElementById(element.id).innerHTML){ addMarker(element.id) } - +} // this function places the "currentMarker" inside the HTML element that was clicked and calls the "changeMarker" function. const addMarker = (id) => { + const row = parseInt(id.charAt(0)) + const column = parseInt(id.charAt(2)) + // @TODO-1: Open the console tab in your Chrome Inspector Tool and click on the top-left square to see what's logged to the console. 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" - + document.getElementById(id).innerHTML= currentMarker +board[row][column]= currentMarker +console.log(board) +checkForWin() // @TODO-2.5: MIX & MATCH, You will need the following pieces of code to build that line: // = currentMarker // .getElementById(id) // document // .innerHTML - - changeMarker() } - - - - - + @@ -73,9 +79,6 @@ const changeMarker = () => { - - - // This "resetBoard" function is called when the user clicks on the "Restart" button. const resetBoard = () => { @@ -89,6 +92,7 @@ const resetBoard = () => { // 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++) { @@ -98,4 +102,37 @@ const resetBoard = () => { // sets the innerHTML to null to replace the "X" or "O" squares[i].innerHTML = null } -} \ No newline at end of file + +} + +const checkForWin= ()=>{ + if (horizontalWin()|| verticleWin()) { + window.alert(`Player ${currentMarker} Won`) + } + else { + 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") + || (board[1][0] == "X" && board[1][1] == "X" && board[1][2] == "X") + || (board[1][0] == "O" && board[1][1] == "O" && board[1][2] == "O") + || (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 +} +} +const verticleWin= ()=> { + 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") + || (board[0][1] == "X" && board[1][1] == "X" && board[2][1] == "X") + || (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O") + || (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 + } + } \ No newline at end of file diff --git a/tictactoe.css b/tictactoe.css index 981de05..a52bfbf 100644 --- a/tictactoe.css +++ b/tictactoe.css @@ -1,6 +1,6 @@ .jumbotron { margin: 5% auto; - margin-left: 43%; + margin-left: 35%; } td { @@ -13,4 +13,5 @@ td { table { margin: auto auto; -} \ No newline at end of file +} + From c77ecd37b04e34dccbba0450f72f220a48b12384 Mon Sep 17 00:00:00 2001 From: chrisstrom1 Date: Sat, 5 Aug 2023 13:49:21 -0500 Subject: [PATCH 6/6] final commit --- index.html | 2 +- scripts.js | 16 +++++++++++++--- tictactoe.css | 2 +- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 4611cc2..e2f9c0e 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@

Welcome to Tic Tac Toe

Get ready to play!

- +
- - +
- - +
- - -
diff --git a/scripts.js b/scripts.js index fb147c1..dbc555f 100644 --- a/scripts.js +++ b/scripts.js @@ -48,7 +48,7 @@ const addMarker = (id) => { 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" - document.getElementById(id).innerHTML= currentMarker +document.getElementById(id).innerHTML= currentMarker board[row][column]= currentMarker console.log(board) checkForWin() @@ -106,7 +106,7 @@ const resetBoard = () => { } const checkForWin= ()=>{ - if (horizontalWin()|| verticleWin()) { + if (horizontalWin()|| verticleWin()|| diagonalWin()){ window.alert(`Player ${currentMarker} Won`) } else { @@ -135,4 +135,14 @@ const verticleWin= ()=> { ){ return true } - } \ No newline at end of file + } + + 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") + || (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 + } +} \ No newline at end of file diff --git a/tictactoe.css b/tictactoe.css index a52bfbf..867441f 100644 --- a/tictactoe.css +++ b/tictactoe.css @@ -1,5 +1,5 @@ .jumbotron { - margin: 5% auto; + margin: 2% auto; margin-left: 35%; }