script.js

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


let turnO = true;
let counter = 0;

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 === true) {
            box.innerText = "O"; // player O
            turnO = false;
        } else {
            box.innerText = "X"; // player X
            turnO = true;
        }
        box.disabled = true;
        counter++;

        let isWinner= checkWinner();

        if(counter == 9 && !isWinner) {
            gameDraw();
        }
    }); 
});


const gameDraw = () => {
    msg.innerText="It's a DRAW!";
    msgContainer.classList.remove("hide");
    disableBoxes();
    };
    

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


const enableBoxes = () => {
    for (let box of boxes) {
        box.disabled = false;
        box.innerText = "";
             
    }
};


const disableBoxes = () => {
    for (let box of boxes) {
        box.disabled = true;
    }
};


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


const checkWinner = () => {
    for(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 && pos2Val === pos3Val) {
                console.log("winner", pos1Val);
                showWinner(pos1Val);
            }
        }
}
};


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