From 2beb75b3c1f66b7460413df98290daaf52c62e02 Mon Sep 17 00:00:00 2001 From: Chris Trevino Date: Tue, 24 Mar 2020 19:41:52 -0500 Subject: [PATCH 1/7] changes --- 01week/helloworld.js | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 01week/helloworld.js diff --git a/01week/helloworld.js b/01week/helloworld.js new file mode 100644 index 000000000..3ae23b3df --- /dev/null +++ b/01week/helloworld.js @@ -0,0 +1,3 @@ +node"use strict" + + console.log("Hello World!"); \ No newline at end of file From 3f482adfbd35066151f2223268150c73b8f13974 Mon Sep 17 00:00:00 2001 From: Chris Trevino Date: Tue, 24 Mar 2020 19:49:19 -0500 Subject: [PATCH 2/7] 1stprogram --- 01week/helloworld.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/01week/helloworld.js b/01week/helloworld.js index 3ae23b3df..8274abb6f 100644 --- a/01week/helloworld.js +++ b/01week/helloworld.js @@ -1,3 +1,3 @@ -node"use strict" +"use strict" console.log("Hello World!"); \ No newline at end of file From 1b06da2cf0fa8697416aaf2290b747ea9a54fb6c Mon Sep 17 00:00:00 2001 From: Chris Trevino Date: Wed, 8 Apr 2020 18:01:27 -0500 Subject: [PATCH 3/7] changes --- 03week/ticTac.css | 36 ++++++++++++++++++++++++++++++++ 03week/ticTac.html | 32 +++++++++++++++++++++++++++++ 03week/ticTacGUI.js | 50 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 118 insertions(+) create mode 100644 03week/ticTac.css create mode 100644 03week/ticTac.html create mode 100644 03week/ticTacGUI.js diff --git a/03week/ticTac.css b/03week/ticTac.css new file mode 100644 index 000000000..4dc73f989 --- /dev/null +++ b/03week/ticTac.css @@ -0,0 +1,36 @@ +.main-container { + height: 100%; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + .board { + border: 2px solid black; + display: flex; + flex-direction: column; + height: 500px; + width: 500px; + } + .row { + flex: 1; + display: flex; + flex-direction: row; + } + .clickBox { + height: 100%; + width: 100%; + border: 1px solid blue; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + .clickBox:hover { + cursor: pointer; + } + .clickBox h1 { + color: purple; + font-size: 55px; + } \ No newline at end of file diff --git a/03week/ticTac.html b/03week/ticTac.html new file mode 100644 index 000000000..e6e29cc6f --- /dev/null +++ b/03week/ticTac.html @@ -0,0 +1,32 @@ +` + + + + +Tic-Tac-Toe + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +` \ No newline at end of file diff --git a/03week/ticTacGUI.js b/03week/ticTacGUI.js new file mode 100644 index 000000000..c01266bfe --- /dev/null +++ b/03week/ticTacGUI.js @@ -0,0 +1,50 @@ +//get an element from the DOM +let mainContainer = document.getElementsByClassName('main-container') +let mainContainerQuery = document.querySelector('.main-container') +console.log('mainContainer', mainContainer) +console.log('mainContainerQuery', mainContainerQuery) +let body = document.querySelector('body') +body.style.margin = 0; +mainContainerQuery.style.backgroundColor = 'green' +mainContainer[0].style.height = '100%'; +mainContainer[0].style.width = '100%'; +mainContainerQuery.style.display = 'flex' +mainContainerQuery.style.justifyContent = 'center' +mainContainerQuery.style.alignItems = 'center' + +// create Element +let board = document.createElement('div') +mainContainerQuery.appendChild(board) + +// create a class for tic tac toe board +board.className = 'board' +// add style +board.style.width = '50%' +board.style.height = '50%' +board.style.border = '2px solid black' + +// create a function +function backgroundRed (thatThang) { +console.log('thatThang', thatThang) +thatThang.innerText = 'Dont click me' +// mainContainerQuery.style.backgroundColor = 'red' +mainContainerQuery.classList.toggle('red'); +} + +let previousPlay = null +function addGamePiece (selectedElement) { +// creating element +let newElement = document.createElement('h1') + +if (previousPlay === 'x') { +newElement.innerText = 'o' +previousPlay = 'o' +} else if (previousPlay === 'o') { +newElement.innerText = 'x' +previousPlay = 'x' +} else { +newElement.innerText = 'x' +previousPlay = 'x' +} +selectedElement.appendChild(newElement) +} \ No newline at end of file From fa64b74f72af48877b86bd4ebbef4832c93b3ba5 Mon Sep 17 00:00:00 2001 From: Chris Trevino Date: Fri, 10 Apr 2020 14:00:40 -0500 Subject: [PATCH 4/7] updates ' --- 03week/ticTac.css | 92 ++++++++++++++++++++++++++++++--------------- 03week/ticTac.html | 48 +++++++++++------------ 03week/ticTacGUI.js | 50 ------------------------ 3 files changed, 83 insertions(+), 107 deletions(-) diff --git a/03week/ticTac.css b/03week/ticTac.css index 4dc73f989..fc9632e51 100644 --- a/03week/ticTac.css +++ b/03week/ticTac.css @@ -1,36 +1,66 @@ -.main-container { - height: 100%; - width: 100%; - display: flex; - flex-direction: column; +*, *::after, *::before { + box-sizing: border-box; +} + +:root { + --cell-size: 100px; + --mark-size: calc(var(--cell-size) * .9); + +} +body { + margin: 0; + +} +.board { + width: 100vh; + height: 100vh; + display: grid; justify-content: center; + align-content: center; + justify-items: center; align-items: center; - } - .board { - border: 2px solid black; - display: flex; - flex-direction: column; - height: 500px; - width: 500px; - } - .row { - flex: 1; - display: flex; - flex-direction: row; - } - .clickBox { - height: 100%; - width: 100%; - border: 1px solid blue; + + grid-template-columns: repeat(3, auto) +} + + +.cell { + width: var(--cell-size); + height: var(--cell-size); + border: 1px solid black; display: flex; - flex-direction: column; justify-content: center; align-items: center; - } - .clickBox:hover { - cursor: pointer; - } - .clickBox h1 { - color: purple; - font-size: 55px; - } \ No newline at end of file + + +} + +.cell:first-child, +.cell:nth-child(2), +.cell:nth-child(3) { + border-top: none; +} + +.cell:nth-child(3n + 1) { + border-left: none; + +} + +.cell:nth-child(3n + 3) { + border-right: none; + +} + +.cell:last-child, +.cell:nth-child(8), +.cell:nth-child(7) { + border-bottom: none; +} + +.cell.x::before, +.cell.x::after { +content: ''; +width: calc(var(--mark-size) * 1.5); +height: var(--mark-size); + +} diff --git a/03week/ticTac.html b/03week/ticTac.html index e6e29cc6f..4deef64eb 100644 --- a/03week/ticTac.html +++ b/03week/ticTac.html @@ -1,32 +1,28 @@ -` + + - - - -Tic-Tac-Toe - + + + + + ticTacToeGUI - -
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
-
-
-
-
-
-
-
- + -` \ No newline at end of file + \ No newline at end of file diff --git a/03week/ticTacGUI.js b/03week/ticTacGUI.js index c01266bfe..e69de29bb 100644 --- a/03week/ticTacGUI.js +++ b/03week/ticTacGUI.js @@ -1,50 +0,0 @@ -//get an element from the DOM -let mainContainer = document.getElementsByClassName('main-container') -let mainContainerQuery = document.querySelector('.main-container') -console.log('mainContainer', mainContainer) -console.log('mainContainerQuery', mainContainerQuery) -let body = document.querySelector('body') -body.style.margin = 0; -mainContainerQuery.style.backgroundColor = 'green' -mainContainer[0].style.height = '100%'; -mainContainer[0].style.width = '100%'; -mainContainerQuery.style.display = 'flex' -mainContainerQuery.style.justifyContent = 'center' -mainContainerQuery.style.alignItems = 'center' - -// create Element -let board = document.createElement('div') -mainContainerQuery.appendChild(board) - -// create a class for tic tac toe board -board.className = 'board' -// add style -board.style.width = '50%' -board.style.height = '50%' -board.style.border = '2px solid black' - -// create a function -function backgroundRed (thatThang) { -console.log('thatThang', thatThang) -thatThang.innerText = 'Dont click me' -// mainContainerQuery.style.backgroundColor = 'red' -mainContainerQuery.classList.toggle('red'); -} - -let previousPlay = null -function addGamePiece (selectedElement) { -// creating element -let newElement = document.createElement('h1') - -if (previousPlay === 'x') { -newElement.innerText = 'o' -previousPlay = 'o' -} else if (previousPlay === 'o') { -newElement.innerText = 'x' -previousPlay = 'x' -} else { -newElement.innerText = 'x' -previousPlay = 'x' -} -selectedElement.appendChild(newElement) -} \ No newline at end of file From b58e351e07b9ffb80a3501080f09eb5e6d9b5c79 Mon Sep 17 00:00:00 2001 From: Chris Trevino Date: Fri, 10 Apr 2020 23:50:22 -0500 Subject: [PATCH 5/7] wow --- 03week/ticTac.css | 112 ++++++++++++++++++++++++++++++++++++++++++-- 03week/ticTac.html | 10 ++-- 03week/ticTacGUI.js | 17 +++++++ 3 files changed, 130 insertions(+), 9 deletions(-) diff --git a/03week/ticTac.css b/03week/ticTac.css index fc9632e51..612d731b3 100644 --- a/03week/ticTac.css +++ b/03week/ticTac.css @@ -19,7 +19,6 @@ body { align-content: center; justify-items: center; align-items: center; - grid-template-columns: repeat(3, auto) } @@ -31,6 +30,8 @@ body { display: flex; justify-content: center; align-items: center; + position: relative; + cursor: pointer; } @@ -57,10 +58,113 @@ body { border-bottom: none; } +.cell.x, +.cell.circle { + cursor: not-allowed; + +} + + +.cell.x::before, +.cell.x::after, +.cell.circle::before { + background-color: black; + +} + + + + +.board.x .cell:not(.x):not(.circle):hover::before, +.board.x .cell:not(.x):not(.circle):hover::after, +.board.circle .cell:not(.x):not(.circle):hover::before { + background-color: lightgrey; + +} + + .cell.x::before, -.cell.x::after { -content: ''; -width: calc(var(--mark-size) * 1.5); +.cell.x::after, +.board.x .cell:not(.x):not(.circle):hover::before, +.board.x .cell:not(.x):not(.circle):hover::after { +content: ' '; +position: absolute; +width: calc(var(--mark-size) * .15); height: var(--mark-size); + +} + +.cell.x::before, +.board.x .cell:not(.x):not(.circle):hover::before { + transform: rotate(45deg); + +} + +.cell.x::after, +.board.x .cell:not(.x):not(.circle):hover::after { + transform: rotate(-45deg); + +} + +.cell.circle::before, +.cell.circle::after, +.board.circle .cell:not(.x):not(.circle):hover::before, +.board.circle .cell:not(.x):not(.circle):hover::after { +content: ' '; +position: absolute; +border-radius: 50%; + + +} + +.cell.circle::before, +.board.circle .cell:not(.x):not(.circle):hover::before { + width: var(--mark-size); + height: var(--mark-size); + +} + +.cell.circle::after, +.board.circle .cell:not(.x):not(.circle):hover::after { + width: calc(var(--mark-size) * .7); + height: calc(var(--mark-size) * .7); + background-color: white; +} + +.winning-message{ + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, .9); + justify-content: center; + align-items: center; + color: white; + font-size: 5rem; + flex-direction: column; + +} + +.winning-message button{ + font-size: 3rem; + background-color: white; + border: 1px solid black; + padding: .25em .5em; + cursor: pointer; +} + +.winning-message button:hover { + background-color: black; + color: white; + border-color: white; + + +} + +.winning-message .show { + display: flex; + } diff --git a/03week/ticTac.html b/03week/ticTac.html index 4deef64eb..bdd29dfbc 100644 --- a/03week/ticTac.html +++ b/03week/ticTac.html @@ -8,9 +8,9 @@ ticTacToeGUI -
-
-
+
+
+
@@ -19,9 +19,9 @@
-
+
- +
diff --git a/03week/ticTacGUI.js b/03week/ticTacGUI.js index e69de29bb..fac840312 100644 --- a/03week/ticTacGUI.js +++ b/03week/ticTacGUI.js @@ -0,0 +1,17 @@ +const X_CLASS = 'x' +const CIRCLE_CLASS = 'circle' + +const cellElements = document.querySelectorAll('[data-cell]') +let circleTurn = +cellElements.forEach(cell => { + cell.addEventListener('click', handleClick, {once: true}) + +}) + +function handleClick(e) { + //place the mark + //CHeck for win + //check for a draw + //switch turns + +} \ No newline at end of file From 7fe177b16e0bc364b8b8128d9f7c928791e40597 Mon Sep 17 00:00:00 2001 From: Chris Trevino Date: Sat, 11 Apr 2020 14:57:57 -0500 Subject: [PATCH 6/7] changes --- 03week/ticTacGUI.js | 75 ++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 70 insertions(+), 5 deletions(-) diff --git a/03week/ticTacGUI.js b/03week/ticTacGUI.js index fac840312..012c196b9 100644 --- a/03week/ticTacGUI.js +++ b/03week/ticTacGUI.js @@ -1,17 +1,82 @@ const X_CLASS = 'x' const CIRCLE_CLASS = 'circle' - +const WINNING_COMBINATIONS = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6] +] const cellElements = document.querySelectorAll('[data-cell]') -let circleTurn = -cellElements.forEach(cell => { - cell.addEventListener('click', handleClick, {once: true}) +const board = document.getElementById('board') +const winningMessageTextElement = document.querySelector('[data-winning-message-text]') +let circleTurn + +startGame() +function startGame() { + circleTurn = false + cellElements.forEach(cell => { + cell.addEventListener('click', handleClick, {once: true}) + }) +setBoardHoverCLass() +} + + function handleClick(e) { - //place the mark + + const cell =e.target + const currentClass = circleTurn ? CIRCLE_CLASS : X_CLASS + placeMark(cell, currentClass) + if(checkWin(currentClass)) { + endGame(false) + + } //CHeck for win //check for a draw //switch turns + swapTurns() + setBoardHoverCLass() +} + +function endGame(draw) { + if (draw) { + + } else { + winningMessageTextElement.innerText = '${circleTurn ? "Os" : + "Xs"} Wins!' +} + + function placeMark(cell, currentClass){ + cell.classList.add(currentClass) +} + +function swapTurns() { + circleTurn = !circleTurn + +} +function setBoardHoverCLass() { + board.classList.remove(X_CLASS) + board.classList.remove(CIRCLE_CLASS) + if(circleTurn) { + board.classList.add(CIRCLE_CLASS) + } else { + board.classList.add(X_CLASS) + } + +} + +function checkWin(currentClass) { + return WINNING_COMBINATIONS.some(combination => { + return combination.every(index => { + return cellElements[index].classList.contains(currentClass) + } + ) + }) } \ No newline at end of file From d5b6ac16d115e6f1d3825e5e63215ae6d5c3a1a0 Mon Sep 17 00:00:00 2001 From: Chris Trevino Date: Sun, 12 Apr 2020 08:24:13 -0500 Subject: [PATCH 7/7] changes --- 03week/ticTacGUI.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/03week/ticTacGUI.js b/03week/ticTacGUI.js index 012c196b9..d96912784 100644 --- a/03week/ticTacGUI.js +++ b/03week/ticTacGUI.js @@ -10,9 +10,10 @@ const WINNING_COMBINATIONS = [ [0, 4, 8], [2, 4, 6] ] -const cellElements = document.querySelectorAll('[data-cell]') +const winningMessageElement = document.getElementById('winningMessage') +const cellElements = document.querySelectorAll(`[data-cell]`) const board = document.getElementById('board') -const winningMessageTextElement = document.querySelector('[data-winning-message-text]') +const winningMessageTextElement = document.querySelector(`[data-winning-message-text]`) let circleTurn startGame() @@ -46,10 +47,11 @@ function handleClick(e) { function endGame(draw) { if (draw) { - + } else { - winningMessageTextElement.innerText = '${circleTurn ? "Os" : - "Xs"} Wins!' + winningMessageTextElement.innerText = `${circleTurn ? "O's" : "X's"} Wins!` +} + winningMessageElement.classList.add('show') } function placeMark(cell, currentClass){