diff --git a/index.html b/index.html new file mode 100644 index 0000000..f87d91b --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + + +
+

Tic Tac Toe

+

Player X's Turn

+
+
?
+
?
+
?
+
?
+
?
+
?
+
?
+
?
+
?
+
+ +
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..5c0ac20 --- /dev/null +++ b/script.js @@ -0,0 +1,66 @@ +let playerSymbol = "X"; + +function playerSwitch(){ + if(document.getElementById("title").innerText === "Player X's Turn"){ + document.getElementById("title").innerText = "Player O's Turn"; + playerSymbol = "O"; + } else if (document.getElementById("title").innerText === "Player O's Turn"){ + document.getElementById("title").innerText = "Player X's Turn"; + playerSymbol = "X"; + } +} + +function checkForWinner(){ + if(document.getElementById("topLeft").innerText === document.getElementById("topCenter").innerText && document.getElementById("topLeft").innerText === document.getElementById("topRight").innerText && document.getElementById("topLeft").innerText !== "?"){ + playerSymbol = document.getElementById("topLeft").innerText; + document.getElementById("title").innerText = `Player ${playerSymbol} wins!`; + } else if(document.getElementById("centerLeft").innerText === document.getElementById("center").innerText && document.getElementById("centerLeft").innerText === document.getElementById("centerRight").innerText && document.getElementById("centerLeft").innerText !== "?"){ + playerSymbol = document.getElementById("centerLeft").innerText; + document.getElementById("title").innerText = `Player ${playerSymbol} wins!`; + } else if(document.getElementById("bottomLeft").innerText === document.getElementById("bottomCenter").innerText && document.getElementById("bottomLeft").innerText === document.getElementById("bottomRight").innerText && document.getElementById("bottomLeft").innerText !== "?"){ + playerSymbol = document.getElementById("bottomLeft").innerText; + document.getElementById("title").innerText = `Player ${playerSymbol} wins!`; + } else if(document.getElementById("topLeft").innerText === document.getElementById("centerLeft").innerText && document.getElementById("topLeft").innerText === document.getElementById("bottomLeft").innerText && document.getElementById("topLeft").innerText !== "?"){ + playerSymbol = document.getElementById("topLeft").innerText; + document.getElementById("title").innerText = `Player ${playerSymbol} wins!`; + } else if(document.getElementById("topCenter").innerText === document.getElementById("center").innerText && document.getElementById("topCenter").innerText === document.getElementById("bottomCenter").innerText && document.getElementById("topCenter").innerText !== "?"){ + playerSymbol = document.getElementById("topCenter").innerText; + document.getElementById("title").innerText = `Player ${playerSymbol} wins!`; + } else if(document.getElementById("topRight").innerText === document.getElementById("centerRight").innerText && document.getElementById("topRight").innerText === document.getElementById("bottomRight").innerText && document.getElementById("topRight").innerText !== "?"){ + playerSymbol = document.getElementById("topRight").innerText; + document.getElementById("title").innerText = `Player ${playerSymbol} wins!`; + } else if(document.getElementById("topLeft").innerText === document.getElementById("center").innerText && document.getElementById("topLeft").innerText === document.getElementById("bottomRight").innerText && document.getElementById("topLeft").innerText !== "?"){ + playerSymbol = document.getElementById("topLeft").innerText; + document.getElementById("title").innerText = `Player ${playerSymbol} wins!`; + } else if(document.getElementById("topRight").innerText === document.getElementById("center").innerText && document.getElementById("topRight").innerText === document.getElementById("bottomLeft").innerText && document.getElementById("topRight").innerText !== "?"){ + playerSymbol = document.getElementById("topRight").innerText; + document.getElementById("title").innerText = `Player ${playerSymbol} wins!`; + } else if(document.getElementById("topLeft").innerText !== "?" && document.getElementById("topCenter").innerText !== "?" && document.getElementById("topRight").innerText !== "?" && document.getElementById("centerLeft").innerText !== "?" && document.getElementById("center").innerText !== "?" && document.getElementById("centerRight").innerText !== "?" && document.getElementById("bottomLeft").innerText !== "?" && document.getElementById("bottomCenter").innerText !== "?" && document.getElementById("bottomRight").innerText !== "?"){ + document.getElementById("title").innerText = "It's a draw!"; + } +} + +function addSymbol(event){ + if(event.currentTarget.innerText !== "X" && event.currentTarget.innerText !== "O" && document.getElementById("title").innerText === "Player X's Turn" || document.getElementById("title").innerText === "Player O's Turn"){ + if(playerSymbol === "X"){ + event.currentTarget.innerText = `${playerSymbol}`; + event.currentTarget.style.color = "blue"; + } else if (playerSymbol === "O"){ + event.currentTarget.innerText = `${playerSymbol}`; + event.currentTarget.style.color = "red"; + } + playerSwitch(); + checkForWinner(); + } +}; + +document.querySelectorAll(".grid-item").forEach(item => { + item.addEventListener("click", addSymbol) +}); + +function clearBoard(){ + playerSymbol = "X"; + document.getElementById("title").innerText = "Player X's Turn"; + document.querySelectorAll(".grid-item").forEach(item => item.innerText = "?"); + document.querySelectorAll(".grid-item").forEach(item => item.style.color = "white"); +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a1b9ce1 --- /dev/null +++ b/style.css @@ -0,0 +1,70 @@ +.grid-container { + display: grid; + grid-template-columns: auto auto auto; + background-color: white; + padding: 10px; +} + +.grid-item { + background-color: white; + border: 5px solid black; + padding: 20px; + font-size: 50px; + font-weight: bold; + text-align: center; + color: white; +} + +#container { + width: 500px; + margin: auto; +} + +h1, #title { + text-align: center; +} + +#topLeft { + border-top: none; + border-left: none; +} + +#topCenter { + border-top: none; +} + +#topRight { + border-top: none; + border-right: none; +} + +#centerLeft { + border-left: none; +} + +#centerRight { + border-right: none; +} + +#bottomLeft { + border-bottom: none; + border-left: none; +} + +#bottomCenter { + border-bottom: none; +} + +#bottomRight { + border-bottom: none; + border-right: none; +} + +button { + background-color: lightblue; + border-color: steelblue; + height: 30px; + width: 100px; + margin: 25px auto; + display: block; +} \ No newline at end of file