tic tac toe

by kpulkit29

HTML

<div class="grid">
  <div class="col">
      <div>
      
      </div>
      <div>
      
      </div>
      <div>
      
      </div>
  </div>
    <div class="col">
      <div>
      
      </div>
      <div>
      
      </div>
      <div>
      
      </div>
  </div>
    <div class="col">
      <div>
      
      </div>
      <div>
      
      </div>
      <div>
      
      </div>
  </div>
</div>

CSS

.grid {
  display: flex;
}

.col {
  display: flex;
  flex-direction: column;
}

.col div {
  width: 50px;
  height: 50px;
  text-align: center;
  padding-top: 20px;
  font-size: 24px;
}

.col div:nth-child(1) {
    border-bottom: 1px solid black;
}

.col div:nth-child(2) {
    border-bottom: 1px solid black;
}

.col:nth-child(2) {
  border-left: 1px solid black;
  border-right: 1px solid black;
}

JavaScript

let box = document.querySelectorAll(".col div");
let turn = 1;
for(let i=0; i<box.length; i++) {
  box[i].onclick = function(ev) {
    ev.target.innerHTML = turn === 1 ? 'X' : 'O';
    if(turn == 1) {
      turn = 2;
    } else {
      turn = 1;
    }
  }
}

function checkWinner() {

}