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

JavaScript
1

Tell us what’s happening:

I can not figure out why number 9 and 10 are not passing as it seems they do exactly what I want them to.

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 */
.square {
  height: 100px;
width: 100px
}

.game {
  display: grid;
  grid-template-columns: repeat(3, 100px); /* 3 columns, each 100px */
  grid-template-rows: repeat(3, 100px);
}

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

export function Board() {
  const [player, setPlayer] = useState("X");
  const [count, setCount] = useState(0);
  const [clicks, setClicks] = useState(0);
  const [gameOver, setGameOver] = useState(false);

  const handleClick = (e) => {
    if (gameOver) return;

    if (count === 0 && clicks < 9) {
      if (e.target.innerText === "") {
        e.target.innerText = player;
        setClicks(clicks + 1);

        if (player === "X") {
          setPlayer("O");
        } else {
          setPlayer("X");
        }
      }
    }
  };

  const resetHandleClick = () => {
    for (let i = 1; i <= 9; i++) {
      document.getElementById(i).innerText = "";
    }
    setPlayer("X");
    setCount(0);
    setClicks(0);
    setGameOver(false);
  };

  useEffect(() => {
    if (gameOver) return;
    for (let i = 1; i <= 9; i += 3) {
      if (
        document.getElementById(i).innerText === document.getElementById(i + 1).innerText &&
        document.getElementById(i + 1).innerText === document.getElementById(i + 2).innerText &&
        document.getElementById(i).innerText !== "" &&
        count === 0
      ) {
        setCount(1);
        setPlayer(document.getElementById(i).innerText);
      }
    }

    for (let i = 1; i <= 3; i++) {
      if (
        document.getElementById(i).innerText === document.getElementById(i + 3).innerText &&
        document.getElementById(i + 3).innerText === document.getElementById(i + 6).innerText &&
        document.getElementById(i).innerText !== "" &&
        count === 0
      ) {
        setCount(1);
        setPlayer(document.getElementById(i).innerText);
      }
    }

    for (let i = 1; i <= 1; i++) {
      if (
        document.getElementById(i).innerText === document.getElementById(i + 4).innerText &&
        document.getElementById(i + 4).innerText === document.getElementById(i + 8).innerText &&
        document.getElementById(i).innerText !== "" &&
        count === 0
      ) {
        setCount(1);
        setPlayer(document.getElementById(i).innerText);
      }
    }

    for (let i = 3; i <= 3; i++) {
      if (
        document.getElementById(i).innerText === document.getElementById(i + 2).innerText &&
        document.getElementById(i + 2).innerText === document.getElementById(i + 4).innerText &&
        document.getElementById(i).innerText !== "" &&
        count === 0
      ) {
        setCount(1);
        setPlayer(document.getElementById(i).innerText);
      }
    }

    if (count === 1) {
      setGameOver(true);
      document.getElementById("results").innerText = `Winner: ${player}`;
    } else if (clicks === 9) {
      setGameOver(true);
      document.getElementById("results").innerText = "Draw";
    } else {
      document.getElementById("results").innerText = "";
    }
  }, [count, clicks]);

  return (
    <>
      <div className="game">
        <button onClick={handleClick} className="square" id="1"></button>
        <button onClick={handleClick} className="square" id="2"></button>
        <button onClick={handleClick} className="square" id="3"></button>
        <button onClick={handleClick} className="square" id="4"></button>
        <button onClick={handleClick} className="square" id="5"></button>
        <button onClick={handleClick} className="square" id="6"></button>
        <button onClick={handleClick} className="square" id="7"></button>
        <button onClick={handleClick} className="square" id="8"></button>
        <button onClick={handleClick} className="square" id="9"></button>
      </div>
      <button id="reset" onClick={resetHandleClick}>Reset</button>
      <p id="results"></p>
    </>
  );
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:146.0) Gecko/20100101 Firefox/146.0

Challenge Information:

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

2

Here are the error messages in the console

Object { message: “expected ‘O’ to not include ‘O’”, showDiff: false, actual: “O”, expected: undefined, operator: “notStrictEqual”, stack: “”, … }

dom-test-evaluator.js:2:33082

Object { message: “expected ‘O’ to not include ‘O’”, showDiff: false, actual: “O”, expected: undefined, operator: “notStrictEqual”, stack: “”, … }

dom-test-evaluator.js:2:256854

Object { message: “expected ‘\\n Reset\\n \\n\\n\\n’ to not equal ‘\\n Reset\\n \\n\\n\\n’”, showDiff: true, actual: “\n Reset\n \n\n\n”, expected: “\n Reset\n \n\n\n”, operator: “notStrictEqual”, stack: “”, … }

dom-test-evaluator.js:2:33082

Object { message: “expected ‘\\n Reset\\n \\n\\n\\n’ to not equal ‘\\n Reset\\n \\n\\n\\n’”, showDiff: true, actual: “\n Reset\n \n\n\n”, expected: “\n Reset\n \n\n\n”, operator: “notStrictEqual”, stack: “”, … }

3

For a putting some stuff outside of the useEffect helped