project.js

let boxes = document.querySelectorAll(".button")
let reset = document.querySelector(".reset")
let winning_line = document.querySelector(".winning")
let new_btn = document.querySelector(".new_game")

let turnX = true;


let winner = [[0,1,2],[0,3,6],[0,4,8],[1,4,7],[2,5,8],[2,4,6],[3,4,5],[6,7,8]];
reset.addEventListener("click",() =>{
    turnX = true;
    for(let b of boxes){
        b.innerText="";
        b.disabled=false;
        winning_line.innerText = "";
    }
})
new_btn.addEventListener("click",() =>{
    turnX = true;
    for(let b of boxes){
        b.innerText="";
        b.disabled=false;
    }
    winning_line.innerText = "";
})

boxes.forEach((box) => {
        box.addEventListener("click",() =>{
            console.log("box was clicked")
           
            if(turnX){
                box.innerText = "X";
                turnX = false;
            }
            else{
                box.innerText = "0";
                turnX = true;
            }
            box.disabled = true;
          
            checkwin();
        });
})

const checkwin = () => {
    for (let win of winner) {
    //     console.log(win[0],win[1],win[2]);
    //     console.log(boxes[win[0]].innerText, boxes[win[1]].innerText, boxes[win[2]].innerText);

    let posval1 = boxes[win[0]].innerText;
    let posval2 = boxes[win[1]].innerText;
    let posval3 = boxes[win[2]].innerText;
    
    if(posval1!=""&&posval2!=""&&posval3!=""){
        if(posval1==posval2&&posval2==posval3){
            if(posval1=="0")
             {console.log(`Congratulation O won the game`);
            winning_line.innerText=`Congratulation O won the game`}
        
        if(posval1=="X"){
             {console.log(`Congratulation X won the game`);
            winning_line.innerText=`||Congratulations!! X won the game||`}
        }
       for(b of boxes){
        b.disabled = true;
       }
    }
    }


     }
}