Build a Tic-Tac-Toe Game - Build a Tic-Tac-Toe Game

Curriculum Help
1

Tell us what’s happening:

I have a problem with 9. 10. and 11. My code working similar with example, but don’t pass the test?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Tic-Tac-Toe</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.5/babel.min.js"></script>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      src="index.jsx"
    ></script>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <div id="root"></div>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      data-presets="react"
      data-type="module"
    >
      import { Board } from './index.jsx';
      ReactDOM.createRoot(document.getElementById('root')).render(<Board />);
    </script>
</body>

</html>

/* file: styles.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f0f0f0;
}

#root {
  text-align: center;
  background: white;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

h1 {
  font-size: 36px;
  color: #333;
  margin-bottom: 10px;
}

h3 {
  font-size: 20px;
  color: #555;
  margin-bottom: 20px;
  min-height: 30px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 4px;
  background: #333;
  margin: 20px auto;
  width: fit-content;
}

.square {
  width: 100px;
  height: 100px;
  font-size: 40px;
  font-weight: bold;
  background: white;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.square:hover {
  background: #f0f0f0;
}

.square:active {
  background: #ddd;
}

.resset {
  padding: 12px 40px;
  font-size: 18px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 10px;
}

.resset {
  background: #45a049;
}

.resset {
  transform: scale(0.95);
}

/* file: index.jsx */
const { useState, useEffect } = React;

export function Board() {
  const [ buttons, setButtons ] = useState(['', '', '', '', '', '', '', '', ''])
  const [ player, setPlayer ] = useState('X')
  const [ winner, setWinner ] = useState('')
  const [ draw, setDraw ] = useState('')

const togglePlayer = () => {
  if (player==='X'){
    setPlayer('O')
  } else if (player==='O'){
    setPlayer('X')
  }
}

useEffect(()=>{
  whoWinner()
},[buttons])

const whoWinner = () => {
if (
  (buttons[0] === "X" && buttons[1] === "X" && buttons[2] === "X") ||
  (buttons[0] === "X" && buttons[3] === "X" && buttons[6] === "X") ||
  (buttons[3] === "X" && buttons[4] === "X" && buttons[5] === "X") ||
  (buttons[6] === "X" && buttons[7] === "X" && buttons[8] === "X") ||
  (buttons[1] === "X" && buttons[4] === "X" && buttons[7] === "X") ||
  (buttons[2] === "X" && buttons[5] === "X" && buttons[8] === "X") ||
  (buttons[0] === "X" && buttons[4] === "X" && buttons[8] === "X") ||
  (buttons[2] === "X" && buttons[4] === "X" && buttons[6] === "X")
) {
  setWinner("X");
}
  if  (
  (buttons[0] === "O" && buttons[1] === "O" && buttons[2] === "O") ||
  (buttons[0] === "O" && buttons[3] === "O" && buttons[6] === "O") ||
  (buttons[3] === "O" && buttons[4] === "O" && buttons[5] === "O") ||
  (buttons[6] === "O" && buttons[7] === "O" && buttons[8] === "O") ||
  (buttons[1] === "O" && buttons[4] === "O" && buttons[7] === "O") ||
  (buttons[2] === "O" && buttons[5] === "O" && buttons[8] === "O") ||
  (buttons[0] === "O" && buttons[4] === "O" && buttons[8] === "O") ||
  (buttons[2] === "O" && buttons[4] === "O" && buttons[6] === "O")
) {
  setWinner("O");
} 
if(!buttons.includes('') && !winner){
  setDraw('Its a Draw!')
}
}

const handleClick = (i) => {
  if(winner || draw){
    return
  }

  const buttonsCopy = [...buttons]

  if(!buttons[i] && !winner){
    buttonsCopy[i] = player
    setButtons(buttonsCopy)
    togglePlayer()
  }
}

const resset = () => {
  setButtons(['', '', '', '', '', '', '', '', ''])
  setWinner('')
  setPlayer('X')
  setDraw('')
}

  return (<>
  <h1>Tic-Tac-Toe</h1>
  {winner ? (<h3>Winner is {winner}</h3>) : draw ? (<h3>{draw}</h3>) : (<h3>Next player: {player}</h3>)}
    <div className="grid-container">
      {buttons.map((value, i)=>(<button className="square" disabled={winner || draw} onClick={()=>{handleClick(i)}} key={i}>{value}</button>))}
    </div>
    <button id="reset" className="resset" onClick={resset}>Resset</button>
    </>
  )
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:152.0) Gecko/20100101 Firefox/152.0

Challenge Information:

Build a Tic-Tac-Toe Game - Build a Tic-Tac-Toe Game

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-tic-tac-toe/67e3a6b7f60b4085588189e6.md at main · freeCodeCamp/freeCodeCamp · GitHub