script.js

let boxes =document.querySelectorAll(".box");
let resetBtn =document.querySelector("#reset-btn");
let newGameBtn = document.querySelector("#new-game");
let msgPra = document.querySelector("#msg")
let msgContainer = document.querySelector(".msg-container");
let turnO = true;

const winPatterns = [
    [0, 1, 2],
    [0, 3, 6],
    [0, 4, 8],
    [1, 4, 7],
    [2, 5, 8],
    [2, 4, 6],
    [3, 4, 5],
    [6, 7, 8]
];

boxes.forEach((box) => {
    box.addEventListener("click",()=>{
        console.log("box was clicked");
        if(turnO){
            box.innerText = "O";
            box.style.color = "rgb(166, 1, 231)"
            turnO = false;
        }
        else{ 
            box.innerText= "X";
            box.style.color = "rgb(241, 6, 151)";
            turnO = true;
        }
        box.disabled = true;
        checkWiner();
    });
});
//reset function

const resetGame = () => {
    turnO = true;
    enableBoxes();
   
};
const disableBoxes = () =>{
    for(let box of boxes){
        box.disabled = true;
    }
};
const enableBoxes = () =>{
    for(let box of boxes){
        box.disabled = false;
        box.innerText ="";
        
    }
     msgContainer.classList.add("hide");
};

const showWinner = (Winner)=>{
    msgPra.innerText = "Congratulations, winner is "+Winner;
    msgContainer.classList.remove("hide");
    
};

const checkWiner= ()=>{
    for(let pattern of winPatterns){
        let pos1Val = boxes[pattern[0]].innerText;
        let pos2Val = boxes[pattern[1]].innerText;
        let pos3Val = boxes[pattern[2]].innerText;
        if( pos1Val!="" && pos2Val !="" && pos3Val != ""){
            if(pos1Val === pos2Val && pos3Val === pos2Val ){
            console.log("player "+pos1Val+ " is winner.");
            disableBoxes();
            showWinner(pos1Val);
        }
        }
        
    }
};



newGameBtn.addEventListener("click", resetGame);
resetBtn.addEventListener("click", resetGame);