script.js

let boxes = document.querySelectorAll(".box");
let resetBtn = document.querySelector("#resetbtn");
let newgamebtn = document.querySelector("#newbtn");
let msgContainer = document.querySelector(".msg-container");
let msg = document.querySelector("#msg")

let turnO= true //player X, player y
//if the above val is true O prints(playerx turn) else X(player Ys turn)

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

const enableAll = () =>{ //when reset game 
    for (let box of boxes){
        box.disabled = false;
        box.innerText ="";
        box.classList.remove("box-x", "box-o");
    }
}

const resetGame=() => {
    turnO = true;
    enableAll();
    msgContainer.classList.add("hide");
};

//adding event listeners on each box

boxes.forEach((box) => {
    box.addEventListener("click", () => {
       // console.log("box was clicked");
        if(turnO) {
            box.innerText = "O";
            box.classList.add("box-o");
            turnO = false; //as o's turn is now over, set his turn to false. so next time it is X's trun
        }else{
            box.innerText = "X";
            box.classList.add("box-x"); 
            turnO = true;
        }
        box.disabled = true;
        chkWinner();
    });
});

const disableOtherPlayer = () =>{ //disable other player if first one won
    for (let box of boxes){
        box.disabled = true;
    }
}

const showWinner = (winner) =>{
    msg.innerText = `Congratulations, winner is ${winner}`;
    msgContainer.classList.remove("hide");
    disableOtherPlayer();
}

const chkWinner = () => {
    for (let pattern of winPatterns){
        // console.log(pattern[0],pattern[1],pattern[2]);
        // console.log(
        //     boxes[pattern[0]].innerText,
        //     boxes[pattern[1]].innerText,
        //     boxes[pattern[2]].innerText
        // );
        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 && pos2val === pos3val){
                //console.log("winner",pos1val);
                showWinner(pos1val);
            }else{
                msg.innerText = "It's a DRAW!"
            }
        }
    }
};

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