Tell us what’s happening:
Hello,
My code is fulfilling all the requirement but it does not pass the following tests :
-
- The second click of a button.square element should result in O being displayed within the element.
- All subsequent clicks of a button.square element should alternate between displaying X and O within the element.
9. Clicking on a button.square element after the game has ended should result in no change. - The game should display a message indicating the winner to be X or O.
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: index.jsx */
const { useState } = React;
export function Board() {
const [turn, setTurn] = useState("X");
const [winner, setWinner] = useState(null);
const [draw, setDraw] = useState(null);
const [btns, setBtns] = useState(new Array(9).fill(""));
const toggleTurn = () => {
if(turn==="X")setTurn("O");
if(turn==="O")setTurn("X");
return
};
const updateGame = (btn) => {
if(btn.textContent!=="" || winner) return false;
btn.textContent = turn;
const newBtns = btns;
newBtns[btn.id] = turn;
setBtns(newBtns);
return true;
}
const checkForWinner = () => {
const winners = [
[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 position = [];
btns.forEach((btn,index)=>{
if(btn===turn)position.push(index);
});
for(let i=0; i<winners.length; i++){
if(winners[i].every((num)=>position.includes(num))){
setWinner(turn);
return true;
};
};
};
const checkForDraw = () => {
if(!btns.includes(""))setDraw("Draw");
return;
};
const handleReset= () => {
setBtns(new Array(9).fill(""));
setWinner(null);
setDraw(null);
};
const handleClick = (btn) => {
const updated = updateGame(btn);
if(checkForWinner()) return;
checkForDraw();
if(updated)toggleTurn();
};
return(
<div id="container">
<h1>Tic-Tac-Toe</h1>
{!winner && !draw && <h3>Next player : {turn}</h3>}
{winner && <h3>Winner : {winner}</h3>}
{draw && !winner && <h3>its a Draw</h3>}
<div id="btn-container">
{btns.map((btn,index)=>(
<button className="square"
key={index}
id={index}
onClick={(e)=>handleClick(e.target)}>{btn}</button>
))}
</div>
<button id="reset"
onClick={()=>handleReset()}>
Reset Game</button>
</div>
)
}
/* file: styles.css */
*{
box-sizing : border-box;
}
#container{
display: flex;
flex-direction: column;
}
#btn-container{
width: 200px;
height : 200px;
background-color : black;
border-radius:7px;
margin: auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
h1,h3{
text-align: center;
}
.square{
background-color :#FFF6DE;
}
#reset{
margin: 20px auto;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.6 Safari/605.1.15
Challenge Information:
Build a Tic-Tac-Toe Game - Build a Tic-Tac-Toe Game