app.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 container = document.querySelector(".container");

let turnO = true; //playerX , playerO 
 
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]
];

const resetGame = () => {
    turnO = true;
    enableboxes();
    msgcontainer.classList.add("hide");
    container.classList.remove("hide");
}

boxes.forEach((box) => {
    box.addEventListener("click", () => {
        if (turnO){
            box.innerText = "O";
            turnO = false;
        } else {
            box.innerText = "X";
            turnO = true;
        }
        box.disabled = true;

        checkwinner();
    });
});


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

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


const showwinner = (winner) => {
    msg.innerText = `congralations, winner is ${winner}`;
    msgcontainer.classList.remove("hide");
    container.classList.add("hide");
    disableboxes();
}

const showDraw = () => {
    msg.innerText = "It's a Draw!";
    msgcontainer.classList.remove("hide");
    container.classList.add("hide");
    disableboxes();
}

const checkwinner = () => {
    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 && pos2val === pos3val ) {
                showwinner(pos1val);
            }
        }
    }
 if ([...boxes].every(box => box.innerText !== "")) {
        showDraw();
    }
};

newGamebtn.addEventListener("click" , resetGame);
resetbtn.addEventListener("click" , resetGame);