diff --git a/index.html b/index.html index 51219921..ed7d20c0 100644 --- a/index.html +++ b/index.html @@ -290,118 +290,130 @@

Clothing Shop

- - + +

Game

Tic Tac Toe

- - -
-
-

Bing

-

Top 10 rated Netflix Series of 2023

-
- - -
-
-

Game

-

Candy Crush

-
- - + +
+
+

Bing

+

Top 10 rated Netflix Series of 2023

+
+ + +
+
+

Game

+

Candy Crush

+
+ + + + + +
+
+

Game

+

Memory Game

+
+ + + +
+
+

Website

+

University Website

+
+ + + +
+
+

Expense_Tracker/p> +

Expense Tracker

+
+ + + +
+
+

Clone/p> +

Spotify Clone

+
+ + + +
+
+
+

Website

+

Solar System Model

+
+ + + + + +
+
+
+

Game

+

Bingo Game

+ +
+ + +
+
+

Game

+

Bingo Game

+ +
+ + +
+ - -
-
-

Game

-

Memory Game

-
- - - -
-
-

Website

-

University Website

-
- - - -
-
-

Expense_Tracker/p> -

Expense Tracker

-
+ +
+

CONTACT US

+
+ - - -
-
-

Clone/p> -

Spotify Clone

-
+ - - -
-
-

Website

-

Solar System Model

-
+ +
Instagram
+ - - - - -
-
-

Game

-

Bingo Game

- -
+ +
Github
+ - -
- - - -

CONTACT US

-
- - - -
Instagram
- - - -
Github
- - - -
Linkedin
- - -
-
-
-
-

IEEE SSIT VIT © 2023

-
+ +
Linkedin
+ + +
+
+
+
+

IEEE SSIT VIT © 2023

+
- + \ No newline at end of file diff --git a/projects/Tic-Tac-Toe/index.html b/projects/Tic-Tac-Toe/index.html new file mode 100644 index 00000000..48175814 --- /dev/null +++ b/projects/Tic-Tac-Toe/index.html @@ -0,0 +1,31 @@ + + + + + + + + + Document + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + + \ No newline at end of file diff --git a/projects/Tic-Tac-Toe/index.js b/projects/Tic-Tac-Toe/index.js new file mode 100644 index 00000000..c6fd64bb --- /dev/null +++ b/projects/Tic-Tac-Toe/index.js @@ -0,0 +1,89 @@ +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]') +const board = document.getElementById('board') +const winningMessageElement = document.getElementById('winningMessage') +const restartButton = document.getElementById('restartButton') +const winningMessageTextElement = document.querySelector('[data-winning-message-text]') +let circleTurn + +startGame() + +restartButton.addEventListener('click', startGame) + +function startGame() { + circleTurn = false + cellElements.forEach(cell => { + cell.classList.remove(X_CLASS) + cell.classList.remove(CIRCLE_CLASS) + cell.removeEventListener('click', handleClick) + cell.addEventListener('click', handleClick, { once: true }) + }) + setBoardHoverClass() + winningMessageElement.classList.remove('show') +} + +function handleClick(e) { + const cell = e.target + const currentClass = circleTurn ? CIRCLE_CLASS : X_CLASS + placeMark(cell, currentClass) + if (checkWin(currentClass)) { + endGame(false) + } else if (isDraw()) { + endGame(true) + } else { + swapTurns() + setBoardHoverClass() + } +} + +function endGame(draw) { + if (draw) { + winningMessageTextElement.innerText = 'Draw!' + } else { + winningMessageTextElement.innerText = `${circleTurn ? "O's" : "X's"} Wins!` + } + winningMessageElement.classList.add('show') +} + +function isDraw() { + return [...cellElements].every(cell => { + return cell.classList.contains(X_CLASS) || cell.classList.contains(CIRCLE_CLASS) + }) +} + +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 diff --git a/projects/Tic-Tac-Toe/sample.jpg b/projects/Tic-Tac-Toe/sample.jpg new file mode 100644 index 00000000..98942587 Binary files /dev/null and b/projects/Tic-Tac-Toe/sample.jpg differ diff --git a/projects/Tic-Tac-Toe/style.css b/projects/Tic-Tac-Toe/style.css new file mode 100644 index 00000000..1a3a2316 --- /dev/null +++ b/projects/Tic-Tac-Toe/style.css @@ -0,0 +1,146 @@ +*, *::after, *::before { + box-sizing: border-box; + } + + :root { + --cell-size: 100px; + --mark-size: calc(var(--cell-size) * .9); + } + + body { + margin: 0; + } + + .board { + width: 100vw; + height: 100vh; + display: grid; + justify-content: center; + align-content: center; + justify-items: center; + align-items: center; + grid-template-columns: repeat(3, auto) + } + + .cell { + width: var(--cell-size); + height: var(--cell-size); + border: 1px solid black; + display: flex; + justify-content: center; + align-items: center; + position: relative; + cursor: pointer; + } + + .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, + .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, + .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; + } \ No newline at end of file