script.js

let turnO = true;
let boxes = document.querySelectorAll(".box");
let resultPopup = document.getElementById("result-popup");
let resultText = document.getElementById("result-text");
let restartBtn = document.getElementById("restart");

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

boxes.forEach((box,index) => {
    box.addEventListener("click", () => {
        if(box.textContent !== "") return;

        if(turnO) {
            box.textContent = "O";
        } else {
            box.textContent = "X";
        }

        box.disabled = true;
        checkWinner();
        turnO = !turnO;
    });
});

const checkWinner = () => {
    for(let pattern of patterns) {
        let v1 = boxes[pattern[0]].textContent;
        let v2 = boxes[pattern[1]].textContent;
        let v3 = boxes[pattern[2]].textContent;

        if(v1 && v1 === v2 && v2 === v3) {
            showResult(v1);
            boxes.forEach(box => box.disabled = true);
            return;
        }
    }

    // Check for Draw
    let draw = true;
    boxes.forEach(box => {
        if(box.textContent === "") draw = false;
    });
    if(draw) showResult("Draw");
};

const showResult = (winner) => {
    if(winner === "Draw") {
        resultText.textContent = "It's a Draw!";
    } else {
        resultText.textContent = `Winner is: ${winner}`;
    }
    resultPopup.classList.remove("hidden");
};

restartBtn.addEventListener("click", () => {
    boxes.forEach(box => {
        box.textContent = "";
        box.disabled = false;
    });
    resultPopup.classList.add("hidden");
    turnO = true;
});