WebDevSimplified · Bredalis · Dec 12, 2023 · Feb 24, 2024 · Mar 30, 2024 · Jun 10, 2024
diff --git a/README.md 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
@@ -5,10 +5,12 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="styles.css">
+  <link rel="shortcut icon" href="https://cdn-icons-png.flaticon.com/128/5319/5319398.png" type="image/x-icon">
  <script src="script.js" defer></script>
-  <title>Document</title>
+  <title>Tic-Tac-Toe</title>
 </head>
 <body>
+  <h1>✨ Tic Tac Toe ✨</h1>
  <div class="board" id="board">
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
@@ -22,7 +24,7 @@
  </div>
  <div class="winning-message" id="winningMessage">
    <div data-winning-message-text></div>
-    <button id="restartButton">Restart</button>
+    <button id="restartButton">Reiniciar</button>
  </div>
 </body>
 </html>
diff --git 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
@@ -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 {
Original file line number	Diff line number	Diff line change
		@@ -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.