From a3ebdfc4475137be5d25644b8d5d75a2e9b2e793 Mon Sep 17 00:00:00 2001 From: eflaatten Date: Tue, 30 Jan 2024 20:56:57 -0600 Subject: [PATCH 1/5] First class for TTT --- index.html | 16 ++++++++++-- scripts.js | 77 ++++++++++++++++++++++++++++-------------------------- 2 files changed, 54 insertions(+), 39 deletions(-) diff --git a/index.html b/index.html index 19d0dee..9043877 100644 --- a/index.html +++ b/index.html @@ -20,10 +20,22 @@

Welcome to Tic Tac Toe

- - + + + + + + + + + + + + + + diff --git a/scripts.js b/scripts.js index ba09e74..e579b6a 100644 --- a/scripts.js +++ b/scripts.js @@ -9,8 +9,11 @@ // 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 = [ + "", "", "", + "", "", "", + "", "", "" +] // 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 @@ -26,16 +29,6 @@ const handleClick = (element) => { } } - - - - - - - - - - // this function places the "currentMarker" inside the HTML element that was clicked and calls the "changeMarker" function. const addMarker = (id) => { @@ -44,25 +37,19 @@ 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 // @TODO-2.5: MIX & MATCH, You will need the following pieces of code to build that line: // = currentMarker // .getElementById(id) // document // .innerHTML + board[row][column] = currentMarker + const row = parseInt(element.id.charAt(0)) + const column = parseInt(element.id.charAt(2)) changeMarker() } - - - - - - - - - // This "changeMarker" function changes "X" to "O" in the "currentMarker" variable or "O" to "X" const changeMarker = () => { if(currentMarker === "X"){ @@ -72,21 +59,12 @@ const changeMarker = () => { } } - - - - - - - - - // 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 - + const squares = document.getElementsByTagName("td") // @TODO-3.5: MIX & MATCH, You will need the following pieces of code to build that line: // squares // .getElementsByTagName("TD") @@ -95,12 +73,37 @@ const resetBoard = () => { // const // loops over the HTML Collection of TDs and clears out the Xs and Os - for (i=0; i < squares.length; i++) { - + for (i = 0; i < squares.length; i++) { // will log out the id of each square as it loops over them. console.log(squares[i].id) - // sets the innerHTML to null to replace the "X" or "O" squares[i].innerHTML = null - } -} \ No newline at end of file + console.log("Board has been reset!") + } +} + +const checkForWin = () => { + if(horizontalWin() || verticalWin() || diagonalWin()) { + window.alert(`Player ${currentMarker} won!`) + } else { + changeMarker() + } +} + +const horizontalWin = () => { + // Your code here to check for horizontal wins + ((board[0][0] == "X" && board[0][1] == "X" && board[0][2] == "X") + |(board[0][0] == "O" && board[0][1] == "O" && board[0][2] == "O")) +} + +const verticalWin = () => { + // Your code here to check for vertical wins + ((board[0][0] == "X" && board[1][0] == "X" && board[2][0] == "X") + |(board[0][0] == "O" && board[1][0] == "O" && board[2][0] == "O")) +} + +const diagonalWin = () => { + // Your code here to check for diagonal wins + ((board[0][0] == "X" && board[1][1] == "X" && board[2][2] == "X") + |(board[0][0] == "O" && board[1][1] == "O" && board[2][2] == "O")) +} From dcd9f641736d0bea55441c588b5bd802f3dc09f7 Mon Sep 17 00:00:00 2001 From: eflaatten Date: Wed, 31 Jan 2024 14:59:42 -0600 Subject: [PATCH 2/5] checkForWin attempt --- index.html | 18 +++++++++--------- scripts.js | 48 +++++++++++++++++++++++++++++++++--------------- 2 files changed, 42 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index 9043877..f0ea190 100644 --- a/index.html +++ b/index.html @@ -19,22 +19,22 @@

Welcome to Tic Tac Toe

- - - + + + - - - + + + - - - + + +
diff --git a/scripts.js b/scripts.js index e579b6a..21de669 100644 --- a/scripts.js +++ b/scripts.js @@ -15,6 +15,7 @@ let board = [ "", "", "" ] + // 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) => { @@ -31,7 +32,13 @@ const handleClick = (element) => { // this function places the "currentMarker" inside the HTML element that was clicked and calls the "changeMarker" function. const addMarker = (id) => { + let currentMarker = Math.random() < 0.5 ? "X" : "O" + + const row = parseInt(id.charAt(0)) + const column = parseInt(id.charAt(2)) + board[row][column] = currentMarker + checkForWin() // @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}`) @@ -43,11 +50,7 @@ const addMarker = (id) => { // .getElementById(id) // document // .innerHTML - board[row][column] = currentMarker - const row = parseInt(element.id.charAt(0)) - const column = parseInt(element.id.charAt(2)) - changeMarker() } // This "changeMarker" function changes "X" to "O" in the "currentMarker" variable or "O" to "X" @@ -84,26 +87,41 @@ const resetBoard = () => { const checkForWin = () => { if(horizontalWin() || verticalWin() || diagonalWin()) { - window.alert(`Player ${currentMarker} won!`) + alert(`Player ${currentMarker} won!`) } else { changeMarker() } } const horizontalWin = () => { - // Your code here to check for horizontal wins - ((board[0][0] == "X" && board[0][1] == "X" && board[0][2] == "X") - |(board[0][0] == "O" && board[0][1] == "O" && board[0][2] == "O")) + if (board[0][0] === currentMarker && board[0][1] === currentMarker && board[0][2] === currentMarker) { + return true; + } + if (board[1][0] === currentMarker && board[1][1] === currentMarker && board[1][2] === currentMarker) { + return true; + } + if (board[2][0] === currentMarker && board[2][1] === currentMarker && board[2][2] === currentMarker) { + return true; + } } const verticalWin = () => { - // Your code here to check for vertical wins - ((board[0][0] == "X" && board[1][0] == "X" && board[2][0] == "X") - |(board[0][0] == "O" && board[1][0] == "O" && board[2][0] == "O")) + if (board[0][0] === currentMarker && board[1][0] === currentMarker && board[2][0] === currentMarker) { + return true; + } + if (board[0][1] === currentMarker && board[1][1] === currentMarker && board[2][1] === currentMarker) { + return true; + } + if (board[0][2] === currentMarker && board[1][2] === currentMarker && board[2][2] === currentMarker) { + return true; + } } const diagonalWin = () => { - // Your code here to check for diagonal wins - ((board[0][0] == "X" && board[1][1] == "X" && board[2][2] == "X") - |(board[0][0] == "O" && board[1][1] == "O" && board[2][2] == "O")) -} + if (board[0][0] === currentMarker && board[1][1] === currentMarker && board[2][2] === currentMarker) { + return true; + } + if (board[0][2] === currentMarker && board[1][1] === currentMarker && board[2][0] === currentMarker) { + return true; + } +} \ No newline at end of file From 79c37607cd0d7f57c3e9c529ea16155c79a29c4b Mon Sep 17 00:00:00 2001 From: eflaatten Date: Thu, 1 Feb 2024 11:59:30 -0600 Subject: [PATCH 3/5] checkForWin functionality --- scripts.js | 63 +++++++++++++++++++++++++----------------------------- 1 file changed, 29 insertions(+), 34 deletions(-) diff --git a/scripts.js b/scripts.js index 21de669..d66c82b 100644 --- a/scripts.js +++ b/scripts.js @@ -10,12 +10,11 @@ let currentMarker = 'X' let board = [ - "", "", "", - "", "", "", - "", "", "" + ["", "", ""], + ["", "", ""], + ["", "", ""] ] - // 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) => { @@ -32,13 +31,11 @@ const handleClick = (element) => { // this function places the "currentMarker" inside the HTML element that was clicked and calls the "changeMarker" function. const addMarker = (id) => { - let currentMarker = Math.random() < 0.5 ? "X" : "O" const row = parseInt(id.charAt(0)) const column = parseInt(id.charAt(2)) board[row][column] = currentMarker - checkForWin() // @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}`) @@ -50,7 +47,8 @@ const addMarker = (id) => { // .getElementById(id) // document // .innerHTML - + + checkForWin() } // This "changeMarker" function changes "X" to "O" in the "currentMarker" variable or "O" to "X" @@ -83,45 +81,42 @@ const resetBoard = () => { squares[i].innerHTML = null console.log("Board has been reset!") } + + //Reset board array + board = [ + ["", "", ""], + ["", "", ""], + ["", "", ""] + ] + + console.log("Board has been reset!") } const checkForWin = () => { if(horizontalWin() || verticalWin() || diagonalWin()) { - alert(`Player ${currentMarker} won!`) + window.alert(`Player ${currentMarker} won!`) } else { changeMarker() } } const horizontalWin = () => { - if (board[0][0] === currentMarker && board[0][1] === currentMarker && board[0][2] === currentMarker) { - return true; - } - if (board[1][0] === currentMarker && board[1][1] === currentMarker && board[1][2] === currentMarker) { - return true; - } - if (board[2][0] === currentMarker && board[2][1] === currentMarker && board[2][2] === currentMarker) { - return true; - } + return ( + (board[0][0] === currentMarker && board[0][1] === currentMarker && board[0][2] === currentMarker) || + (board[1][0] === currentMarker && board[1][1] === currentMarker && board[1][2] === currentMarker) || + (board[2][0] === currentMarker && board[2][1] === currentMarker && board[2][2] === currentMarker) + ) } - const verticalWin = () => { - if (board[0][0] === currentMarker && board[1][0] === currentMarker && board[2][0] === currentMarker) { - return true; - } - if (board[0][1] === currentMarker && board[1][1] === currentMarker && board[2][1] === currentMarker) { - return true; - } - if (board[0][2] === currentMarker && board[1][2] === currentMarker && board[2][2] === currentMarker) { - return true; - } + return ( + (board[0][0] === currentMarker && board[1][0] === currentMarker && board[2][0] === currentMarker) || + (board[0][1] === currentMarker && board[1][1] === currentMarker && board[2][1] === currentMarker) || + (board[0][2] === currentMarker && board[1][2] === currentMarker && board[2][2] === currentMarker) + ) } - const diagonalWin = () => { - if (board[0][0] === currentMarker && board[1][1] === currentMarker && board[2][2] === currentMarker) { - return true; - } - if (board[0][2] === currentMarker && board[1][1] === currentMarker && board[2][0] === currentMarker) { - return true; - } + return ( + (board[0][0] === currentMarker && board[1][1] === currentMarker && board[2][2] === currentMarker) || + (board[0][2] === currentMarker && board[1][1] === currentMarker && board[2][0] === currentMarker) + ) } \ No newline at end of file From fa7cc8c0e4d52187613151b72ce4f081869c1b8d Mon Sep 17 00:00:00 2001 From: eflaatten Date: Thu, 1 Feb 2024 12:41:32 -0600 Subject: [PATCH 4/5] added some styles --- index.html | 14 +++++++++++--- tictactoe.css | 33 ++++++++++++++++++++++++++++++++- 2 files changed, 43 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index f0ea190..bb2d3cc 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,12 @@ Tic Tac Toe + + + + + + @@ -11,10 +17,12 @@
-

Welcome to Tic Tac Toe

-

Get ready to play!

+

Welcome to Tic Tac Toe!

+

Get ready to play

- +
+ +
diff --git a/tictactoe.css b/tictactoe.css index 981de05..4dc5e9b 100644 --- a/tictactoe.css +++ b/tictactoe.css @@ -1,6 +1,36 @@ +body { + background-color: rgb(47, 147, 0); +} + .jumbotron { margin: 5% auto; - margin-left: 43%; + /* margin-left: 43%; */ + text-align: center; +} + +.jumbotron h1 { + font-family: 'Honk', system-ui; + font-size: 100px; +} + +.jumbotron p { + font-family: 'Poor Story', system-ui; + font-size: 50px; +} + +.reset-button button { + font-size: 50px; + font-family: 'Poor Story', system-ui; + border: none; + outline: none; + color: black; + background-color: transparent; +} + +.reset-button button:hover { + cursor: pointer; + font-size: 55px; + color: blue; } td { @@ -9,6 +39,7 @@ td { text-align: center; border: 5px solid black; font-size: 100px; + font-family: Arial, sans-serif } table { From c07995449ba45d00d0d63aa2794c31df0366704e Mon Sep 17 00:00:00 2001 From: eflaatten Date: Thu, 15 Feb 2024 20:46:06 -0600 Subject: [PATCH 5/5] find a winner --- .vscode/settings.json | 2 +- scripts.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index aef8443..cbb7b3a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "liveServer.settings.port": 5501 + "liveServer.settings.port": 5502 } \ No newline at end of file diff --git a/scripts.js b/scripts.js index d66c82b..dccb9ef 100644 --- a/scripts.js +++ b/scripts.js @@ -94,7 +94,9 @@ const resetBoard = () => { const checkForWin = () => { if(horizontalWin() || verticalWin() || diagonalWin()) { - window.alert(`Player ${currentMarker} won!`) + setTimeout(() => { + window.alert(`Player ${currentMarker} won!`) + }, 100); } else { changeMarker() }