app.js

document.addEventListener("DOMContentLoaded",  ()=>{
    const grid =document.querySelectorAll(".grid div")
    const dis_players=document.querySelector('#c_players')
    const winningArrays = [
        [0, 1, 2, 3],
        [41, 40, 39, 38],
        [7, 8, 9, 10],
        [34, 33, 32, 31],
        [14, 15, 16, 17],
        [27, 26, 25, 24],
        [21, 22, 23, 24],
        [20, 19, 18, 17],
        [28, 29, 30, 31],
        [13, 12, 11, 10],
        [35, 36, 37, 38],
        [6, 5, 4, 3],
        [0, 7, 14, 21],
        [41, 34, 27, 20],
        [1, 8, 15, 22],
        [40, 33, 26, 19],
        [2, 9, 16, 23],
        [39, 32, 25, 18],
        [3, 10, 17, 24],
        [38, 31, 24, 17],
        [4, 11, 18, 25],
        [37, 30, 23, 16],
        [5, 12, 19, 26],
        [36, 29, 22, 15],
        [6, 13, 20, 27],
        [35, 28, 21, 14],
        [0, 8, 16, 24],
        [41, 33, 25, 17],
        [7, 15, 23, 31],
        [34, 26, 18, 10],
        [14, 22, 30, 38],
        [27, 19, 11, 3],
        [35, 29, 23, 17],
        [6, 12, 18, 24],
        [28, 22, 16, 10],
        [13, 19, 25, 31],
        [21, 15, 9, 3],
        [20, 26, 32, 38],
        [36, 30, 24, 18],
        [5, 11, 17, 23],
        [37, 31, 25, 19],
        [4, 10, 16, 22],
        [2, 10, 18, 26],
        [39, 31, 23, 15],
        [1, 9, 17, 25],
        [40, 32, 24, 16],
        [9, 17, 25, 33],
        [8, 16, 24, 32],
        [11, 17, 23, 29],
        [12, 18, 24, 30],
        [1, 2, 3, 4],
        [5, 4, 3, 2],
        [8, 9, 10, 11],
        [12, 11, 10, 9],
        [15, 16, 17, 18],
        [19, 18, 17, 16],
        [22, 23, 24, 25],
        [26, 25, 24, 23],
        [29, 30, 31, 32],
        [33, 32, 31, 30],
        [36, 37, 38, 39],
        [40, 39, 38, 37],
        [7, 14, 21, 28],
        [8, 15, 22, 29],
        [9, 16, 23, 30],
        [10, 17, 24, 31],
        [11, 18, 25, 32],
        [12, 19, 26, 33],
        [13, 20, 27, 34],
      ]
      function createborad(){
          for (let i=0;i<winningArrays.length;i++){
              const square1=grid[winningArrays[i][0]]
              const square2=grid[winningArrays[i][1]]
              const square3=grid[winningArrays[i][2]]
              const square4=grid[winningArrays[i][3]]
              if(square1.classList.contains("playerone")
              &&square2.classList.contains("playerone")
              &&square3.classList.contains("playerone")
              &&square4.classList.contains("playerone")){
                  dis_players.innerHTML="player one win!!!!!!!!!"
              }
              if(square1.classList.contains("playertwo")
              &&square2.classList.contains("playertwo")
              &&square3.classList.contains("playertwo")
              &&square4.classList.contains("playertwo")){
                  dis_players.innerHTML="player two win!!!!!!!!!"
              }
          }
      }
   let current_palyer=1
   dis_players.innerHTML=current_palyer
   for (let i=0;i<grid.length;i++){
       grid[i].onclick=()=>{
          
           if(grid[i+7].classList.contains('taken')&&!grid[i].classList.contains('taken')){ 
              // console.log("functions running")
               if(current_palyer==1){
                   grid[i].classList.add("taken")
                   grid[i].classList.add("playerone")
                   current_palyer=2
                   dis_players.innerHTML=current_palyer
               }
               else {
                   grid[i].classList.add('taken')
                   grid[i].classList.add("playertwo")
                   current_palyer=1
                   dis_players.innerHTML=current_palyer
               }
               createborad()
           }
       }
   }
  

})