diff --git a/README.md b/README.md new file mode 100644 index 0000000..f86a926 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +Welcome to the Tic-Tac-Toe game repository! This project implements the classic Tic-Tac-Toe game using JS, HTML and CSS. It is a simple but fun game that can be played between two players. diff --git a/index.html b/index.html index f958181..0fee425 100644 --- a/index.html +++ b/index.html @@ -5,10 +5,12 @@ + - Document + Tic-Tac-Toe +

✨ Tic Tac Toe ✨

@@ -22,7 +24,7 @@
- +
\ No newline at end of file diff --git a/script.js b/script.js index f1b332f..909dd3d 100644 --- a/script.js +++ b/script.js @@ -1,5 +1,6 @@ -const X_CLASS = 'x' -const CIRCLE_CLASS = 'circle' + +const X_CLASS = "x" +const CIRCLE_CLASS = "circle" const WINNING_COMBINATIONS = [ [0, 1, 2], [3, 4, 5], @@ -10,27 +11,27 @@ const WINNING_COMBINATIONS = [ [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]') +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) +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 }) + cell.removeEventListener("click", handleClick) + cell.addEventListener("click", handleClick, { once: true }) }) setBoardHoverClass() - winningMessageElement.classList.remove('show') + winningMessageElement.classList.remove("show") } function handleClick(e) { @@ -49,11 +50,11 @@ function handleClick(e) { function endGame(draw) { if (draw) { - winningMessageTextElement.innerText = 'Draw!' + winningMessageTextElement.innerText = "Empate!" } else { - winningMessageTextElement.innerText = `${circleTurn ? "O's" : "X's"} Wins!` + winningMessageTextElement.innerText = `${circleTurn ? "O" : "X"} Gana!` } - winningMessageElement.classList.add('show') + winningMessageElement.classList.add("show") } function isDraw() { diff --git a/styles.css b/styles.css index b6b8c1d..783398a 100644 --- a/styles.css +++ b/styles.css @@ -7,8 +7,19 @@ --mark-size: calc(var(--cell-size) * .9); } +* { + font-family: monospace; +} + body { margin: 0; + background-color: #c7f9cc; +} + +h1 { + font-size: 80px; + text-align: center; + margin-bottom: -120px; } .board { @@ -109,7 +120,7 @@ body { .board.circle .cell:not(.x):not(.circle):hover::after { width: calc(var(--mark-size) * .7); height: calc(var(--mark-size) * .7); - background-color: white; + background-color: #c7f9cc; } .winning-message {