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/index.html b/index.html
index 19d0dee..bb2d3cc 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,12 @@
Tic Tac Toe
+
+
+
+
+
+
@@ -11,19 +17,33 @@
-
Welcome to Tic Tac Toe
-
Get ready to play!
+
Welcome to Tic Tac Toe!
+
Get ready to play
-
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/scripts.js b/scripts.js
index ba09e74..dccb9ef 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,43 +29,28 @@ const handleClick = (element) => {
}
}
-
-
-
-
-
-
-
-
-
-
// 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))
+ board[row][column] = currentMarker
+
// @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
// @TODO-2.5: MIX & MATCH, You will need the following pieces of code to build that line:
// = currentMarker
// .getElementById(id)
// document
// .innerHTML
-
- changeMarker()
+
+ checkForWin()
}
-
-
-
-
-
-
-
-
-
// This "changeMarker" function changes "X" to "O" in the "currentMarker" variable or "O" to "X"
const changeMarker = () => {
if(currentMarker === "X"){
@@ -72,21 +60,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 +74,51 @@ 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
- }
+ console.log("Board has been reset!")
+ }
+
+ //Reset board array
+ board = [
+ ["", "", ""],
+ ["", "", ""],
+ ["", "", ""]
+ ]
+
+ console.log("Board has been reset!")
+}
+
+const checkForWin = () => {
+ if(horizontalWin() || verticalWin() || diagonalWin()) {
+ setTimeout(() => {
+ window.alert(`Player ${currentMarker} won!`)
+ }, 100);
+ } else {
+ changeMarker()
+ }
+}
+
+const horizontalWin = () => {
+ 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 = () => {
+ 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 = () => {
+ 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
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 {