diff --git a/.vscode/settings.json b/.vscode/settings.json index aef8443..ea90b0f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "liveServer.settings.port": 5501 + "liveServer.settings.port": 5504 } \ No newline at end of file diff --git a/index.html b/index.html index 19d0dee..4cca167 100644 --- a/index.html +++ b/index.html @@ -1,31 +1,51 @@ - - - Tic Tac Toe - - - - - - -
-
-

Welcome to Tic Tac Toe

-

Get ready to play!

- - -
- - - - - - - - - -
+ + + + Tic Tac Toe + + + + + + + +
+
+

Welcome to Tic Tac Toe

+

Get ready to play!

+ +
- - + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/scripts.js b/scripts.js index ba09e74..edea842 100644 --- a/scripts.js +++ b/scripts.js @@ -1,40 +1,36 @@ -// *********************** -// 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 +] -// 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) +checkForWin = () => { + if (horizontalWin() || verticalWin() || diagonalWin()) { + window.alert("Player " + currentMarker + " won!") + } else { + changeMarker() } } +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}`) - - - - + 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) => { @@ -42,30 +38,23 @@ const addMarker = (id) => { // @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" - - // @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; + //find me the character at the index of 0 + const row = parseInt(id.charAt(0)); + const column = parseInt(id.charAt(2)); + board[row][column] = currentMarker; + checkForWin(); + //changeMarker() +} // This "changeMarker" function changes "X" to "O" in the "currentMarker" variable or "O" to "X" const changeMarker = () => { - if(currentMarker === "X"){ + if (currentMarker === "X") { currentMarker = "O" } else { currentMarker = "X" @@ -73,34 +62,83 @@ const changeMarker = () => { } +// This "resetBoard" function is called when the user clicks on the "Restart" button. +const resetBoard = () => { + 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++) { + // 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 + } + //currentMarker = 'X' + 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; + } -// 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 - - // loops over the HTML Collection of TDs and clears out the Xs and Os - 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) +const verticalWin = () => { - // sets the innerHTML to null to replace the "X" or "O" - squares[i].innerHTML = null - } -} \ No newline at end of file + + 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][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; + } + +} + + +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][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; + } + +} diff --git a/tictactoe.css b/tictactoe.css index 981de05..fcec4a2 100644 --- a/tictactoe.css +++ b/tictactoe.css @@ -1,11 +1,18 @@ +body { + background-color: rgb(131, 207, 131); +} + .jumbotron { margin: 5% auto; margin-left: 43%; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + color: rgb(66, 66, 231); + } td { - height:150px; - width:150px; + height: 150px; + width: 150px; text-align: center; border: 5px solid black; font-size: 100px;