From 98256c4cf8ab80e9339fd9a6e199edca21d98fc1 Mon Sep 17 00:00:00 2001 From: llthompson Date: Mon, 8 May 2023 20:25:30 -0500 Subject: [PATCH 1/6] built tic tac toe --- index.html | 69 ++++++++++++++++++++++++++++++++---------------------- scripts.js | 22 ++++++++--------- 2 files changed, 52 insertions(+), 39 deletions(-) diff --git a/index.html b/index.html index 19d0dee..87fbe0c 100644 --- a/index.html +++ b/index.html @@ -1,31 +1,44 @@ - - - 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..5e8bbdd 100644 --- a/scripts.js +++ b/scripts.js @@ -4,7 +4,7 @@ // 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 +// 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' @@ -21,7 +21,7 @@ const handleClick = (element) => { // 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){ + if (!document.getElementById(element.id).innerHTML) { addMarker(element.id) } } @@ -42,9 +42,9 @@ 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" - + 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) @@ -65,7 +65,7 @@ const addMarker = (id) => { // 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" @@ -83,24 +83,24 @@ 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 - + // 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") // = // document // 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 From fc6be39d8291b985fed58df27fe1926f008a1b3f Mon Sep 17 00:00:00 2001 From: L Thompson <115298894+llthompson@users.noreply.github.com> Date: Mon, 29 May 2023 19:50:35 -0500 Subject: [PATCH 2/6] Ttt logic (#1) * begin logic * working up to thirty six thirty * mostly done --- index.html | 18 +++---- scripts.js | 140 ++++++++++++++++++++++++++++++++--------------------- 2 files changed, 93 insertions(+), 65 deletions(-) diff --git a/index.html b/index.html index 87fbe0c..d3eaca7 100644 --- a/index.html +++ b/index.html @@ -21,19 +21,19 @@

Welcome to Tic Tac Toe

- - - + + + - - - + + + - - - + + + diff --git a/scripts.js b/scripts.js index 5e8bbdd..2b8ecc4 100644 --- a/scripts.js +++ b/scripts.js @@ -1,34 +1,85 @@ -// *********************** -// 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' -// 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 + + + +let currentMarker = 'X'; +let board = [ + [null, null, null], + [null, null, null], + [null, null, null] +]; + + + + + + + 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() + +}; + + +const checkForWin = () => { + if (horizontalWin() || verticalWin() || diagonalWin()) { + setTimeout(() => { + window.alert(`Player ${currentMarker} won!`); + }, 100); + } else { + changeMarker() + } +} + +const horizontalWin = () => { + if ( + (board[0][0] !== null && board[0][0] === board[0][1] && board[0][0] === board[0][2]) || + (board[1][0] !== null && board[1][0] === board[1][1] && board[1][0] === board[1][2]) || + (board[2][0] !== null && board[2][0] === board[2][1] && board[2][0] === board[2][2]) + ) { + return true + } + return false +} +const verticalWin = () => { + if ( + (board[0][0] !== null && board[0][0] === board[1][0] && board[0][0] === board[2][0]) || + (board[0][1] !== null && board[0][1] === board[1][1] && board[0][1] === board[2][1]) || + (board[0][2] !== null && board[0][2] === board[1][2] && board[0][2] === board[2][2]) + ) { + return true + } + return false +} +const diagonalWin = () => { + if ( + (board[0][0] !== null && board[0][0] === board[1][1] && board[0][0] === board[2][2]) || + (board[2][0] !== null && board[2][0] === board[1][1] && board[2][0] === board[0][2]) + ) { + return true + } + return false +} @@ -36,24 +87,12 @@ const handleClick = (element) => { -// this function places the "currentMarker" inside the HTML element that was clicked and calls the "changeMarker" function. 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" - 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() -} - @@ -61,46 +100,35 @@ const addMarker = (id) => { + const values = id.split('-'); + const row = parseInt(values[0]); + const column = parseInt(values[1]); + board[row][column] = currentMarker; + console.log('board', board[row][column], board) + document.getElementById(id).innerHTML = currentMarker; +}; -// This "changeMarker" function changes "X" to "O" in the "currentMarker" variable or "O" to "X" const changeMarker = () => { if (currentMarker === "X") { currentMarker = "O" } else { currentMarker = "X" } -} - - +}; - - - - - - - -// 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") - // = - // 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) - - // sets the innerHTML to null to replace the "X" or "O" - squares[i].innerHTML = null + squares[i].innerHTML = ''; + board = [ + [null, null, null], + [null, null, null], + [null, null, null] + ]; } -} \ No newline at end of file +}; + +// start TTT-Logic + From c13d2222fde1637580c5d548399c8e697832b546 Mon Sep 17 00:00:00 2001 From: L Thompson <115298894+llthompson@users.noreply.github.com> Date: Mon, 29 May 2023 22:29:59 -0500 Subject: [PATCH 3/6] Ttt logic (#3) * begin logic * working up to thirty six thirty * mostly done * style * more styling * Ttt logic (#1) (#2) * begin logic * working up to thirty six thirty * mostly done --- index.html | 7 +++++- tictactoe.css | 69 +++++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 70 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index d3eaca7..b28368e 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,11 @@ + + + Tic Tac Toe @@ -18,7 +23,7 @@

Welcome to Tic Tac Toe

-
+
diff --git a/tictactoe.css b/tictactoe.css index 981de05..6894188 100644 --- a/tictactoe.css +++ b/tictactoe.css @@ -1,16 +1,75 @@ +body { + background-color: #e9e3e3; + font-family: 'Poppins', sans-serif; + font-weight: 300; + font-size: 18px; + color: #646464; +} + .jumbotron { margin: 5% auto; - margin-left: 43%; + width: 50%; + text-align: center; +} + + +h1 { + display: block; + text-align: center; + padding: 0px; + margin: 0px 0px 20px 0px; + color: #b50965; + font-family: 'Pacifico', cursive; + font-size: 36px; +} + +button { + font-family: 'Poppins', sans-serif; + font-weight: 700; + font-size: 18px; + color: #b50965; + border-style: none; + border-radius: 5%; + background-color: white; + padding: 10px; + box-shadow: 10px 10px 20px #00000033; } + td { - height:150px; - width:150px; + height: 150px; + width: 150px; text-align: center; - border: 5px solid black; + border-radius: 5%; + box-shadow: 10px 10px 20px #00000033; font-size: 100px; + background-color: white; + margin: 0 auto; } table { - margin: auto auto; + display: flex; + justify-content: center; + margin: 0 auto; +} + + +.xoxo { + border-spacing: 10px; +} + +@media screen and (max-width: 480px) { + .jumbotron { + width: 90%; + } + + table { + width: 90%; + } + + td { + height: 80px; + width: 80px; + font-size: 60px; + } } \ No newline at end of file From 138ce5a52b385122b931e7a70b8d99ef06c1912b Mon Sep 17 00:00:00 2001 From: llthompson Date: Tue, 13 Jun 2023 10:41:05 -0500 Subject: [PATCH 4/6] add bottom margin --- .vscode/settings.json | 2 +- tictactoe.css | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) 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/tictactoe.css b/tictactoe.css index 6894188..a279ffa 100644 --- a/tictactoe.css +++ b/tictactoe.css @@ -37,6 +37,7 @@ button { td { + height: 150px; width: 150px; text-align: center; @@ -51,6 +52,7 @@ table { display: flex; justify-content: center; margin: 0 auto; + margin-bottom: 70px; } From f7e81974aae6b1611f6e7501736ed4361e181dc1 Mon Sep 17 00:00:00 2001 From: llthompson Date: Wed, 14 Jun 2023 14:40:09 -0500 Subject: [PATCH 5/6] code clean up --- index.html | 53 ++++++++++++++++++----------------------- scripts.js | 65 +++++++++++++-------------------------------------- tictactoe.css | 22 +++++------------ 3 files changed, 45 insertions(+), 95 deletions(-) diff --git a/index.html b/index.html index b28368e..b75c023 100644 --- a/index.html +++ b/index.html @@ -9,41 +9,34 @@ href="https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;700&family=Montserrat:wght@100;300;400;500;600;700&family=Mulish:wght@300;400;700&family=Pacifico&family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,700;1,300&family=Quicksand:wght@300;400;500;600;700&family=Raleway:wght@100;300;400;500;600&display=swap" rel="stylesheet"> Tic Tac Toe - - - -
-
-

Welcome to Tic Tac Toe

-

Get ready to play!

- - -
-
- - - - - - - - - - - - - - - - - - -
+
+

Welcome to Tic Tac Toe

+

Get ready to play!

+
+ + + + + + + + + + + + + + + + +
+ + \ No newline at end of file diff --git a/scripts.js b/scripts.js index 2b8ecc4..02f1f40 100644 --- a/scripts.js +++ b/scripts.js @@ -1,12 +1,4 @@ - - - - - - - - let currentMarker = 'X'; let board = [ [null, null, null], @@ -14,38 +6,26 @@ let board = [ [null, null, null] ]; - - - - - - const handleClick = (element) => { - - console.log(`The element you clicked on has an id: ${element.id}`) - - - if (!document.getElementById(element.id).innerHTML) { - addMarker(element.id) + if (!element.innerHTML) { + addMarker(element.id); } - checkForWin() + checkForWin(); }; - - const checkForWin = () => { if (horizontalWin() || verticalWin() || diagonalWin()) { setTimeout(() => { window.alert(`Player ${currentMarker} won!`); }, 100); } else { - changeMarker() + changeMarker(); } } @@ -55,9 +35,9 @@ const horizontalWin = () => { (board[1][0] !== null && board[1][0] === board[1][1] && board[1][0] === board[1][2]) || (board[2][0] !== null && board[2][0] === board[2][1] && board[2][0] === board[2][2]) ) { - return true + return true; } - return false + return false; } const verticalWin = () => { @@ -66,9 +46,9 @@ const verticalWin = () => { (board[0][1] !== null && board[0][1] === board[1][1] && board[0][1] === board[2][1]) || (board[0][2] !== null && board[0][2] === board[1][2] && board[0][2] === board[2][2]) ) { - return true + return true; } - return false + return false; } const diagonalWin = () => { @@ -76,28 +56,17 @@ const diagonalWin = () => { (board[0][0] !== null && board[0][0] === board[1][1] && board[0][0] === board[2][2]) || (board[2][0] !== null && board[2][0] === board[1][1] && board[2][0] === board[0][2]) ) { - return true + return true; } - return false + return false; } - - - - - const addMarker = (id) => { - console.log(`*** The current marker is: ${currentMarker}. ***`) - console.log(`Therefore, a "${currentMarker}" should be placed in the square with the id: ${id}`) - - - - - - + console.log(`*** The current marker is: ${currentMarker}. ***`); + console.log(`Therefore, a "${currentMarker}" should be placed in the square with the id: ${id}`); const values = id.split('-'); @@ -105,22 +74,22 @@ const addMarker = (id) => { const column = parseInt(values[1]); board[row][column] = currentMarker; - console.log('board', board[row][column], board) + console.log('board', board[row][column], board); document.getElementById(id).innerHTML = currentMarker; }; const changeMarker = () => { if (currentMarker === "X") { - currentMarker = "O" + currentMarker = "O"; } else { - currentMarker = "X" + currentMarker = "X"; } }; const resetBoard = () => { const squares = document.getElementsByTagName("td"); for (i = 0; i < squares.length; i++) { - console.log(squares[i].id) + console.log(squares[i].id); squares[i].innerHTML = ''; board = [ [null, null, null], @@ -130,5 +99,3 @@ const resetBoard = () => { } }; -// start TTT-Logic - diff --git a/tictactoe.css b/tictactoe.css index a279ffa..ec51e16 100644 --- a/tictactoe.css +++ b/tictactoe.css @@ -8,7 +8,6 @@ body { .jumbotron { margin: 5% auto; - width: 50%; text-align: center; } @@ -16,8 +15,8 @@ body { h1 { display: block; text-align: center; - padding: 0px; - margin: 0px 0px 20px 0px; + padding: 0; + margin: 0 0 20px 0; color: #b50965; font-family: 'Pacifico', cursive; font-size: 36px; @@ -37,7 +36,6 @@ button { td { - height: 150px; width: 150px; text-align: center; @@ -60,18 +58,10 @@ table { border-spacing: 10px; } -@media screen and (max-width: 480px) { - .jumbotron { - width: 90%; - } - +@media (max-width: 480px) { table { - width: 90%; - } - - td { - height: 80px; - width: 80px; - font-size: 60px; + width: 100%; + background-color: aqua; + color: aqua; } } \ No newline at end of file From 80e66199d99382e9ccead8161403c5277bc38a51 Mon Sep 17 00:00:00 2001 From: llthompson Date: Sun, 25 Jun 2023 22:48:37 -0500 Subject: [PATCH 6/6] fix sizing finally --- index.html | 1 + tictactoe.css | 48 +++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 44 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index b75c023..0991fef 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ +