Tic Tac Toe - v1

tic-tac-toe-v1.js

<style>
.container {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
}

.cell {
    width: 50px;
    height: 50px;
    background: silver;
    border: 1px solid blue;
    
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;

    cursor: pointer;
}

</style>

<div class="container">
  
    <div class="row">
      <div class="cell">0</div>
      <div class="cell">1</div>
      <div class="cell">2</div>
    </div>
  
    
    <div class="row">
      <div class="cell">3</div>
      <div class="cell">4</div>
      <div class="cell">5</div>
    </div>
    
    <div class="row">
      <div class="cell">6</div>
      <div class="cell">7</div>
      <div class="cell">8</div>
    </div>
    
  </div>



<script>
    const cells = document.querySelectorAll('.cell');

    let lastValue = null;


    cells.forEach(function(cell, index) {
      cell.addEventListener('click', function(event) {
        const newValue = lastValue === 'X' ? '0' : 'X';
        event.target.innerHTML = newValue;
        lastValue = newValue;

        const checkConditionRow1 = cells[0].innerHTML === cells[1].innerHTML && cells[1].innerHTML  === cells[2].innerHTML && cells[0].innerHTML !== "";
        const checkConditionRow2 = cells[3].innerHTML === cells[4].innerHTML && cells[4].innerHTML  === cells[5].innerHTML && cells[3].innerHTML !== "";
        const checkConditionRow3 = cells[6].innerHTML === cells[7].innerHTML && cells[7].innerHTML  === cells[8].innerHTML && cells[6].innerHTML !== "";

        const checkConditionColumn1 = cells[0].innerHTML === cells[3].innerHTML && cells[3].innerHTML  === cells[6].innerHTML && cells[0].innerHTML !== "";
        const checkConditionColumn2 = cells[1].innerHTML === cells[4].innerHTML && cells[4].innerHTML  === cells[7].innerHTML && cells[1].innerHTML !== "";
        const checkConditionColumn3 = cells[2].innerHTML === cells[5].innerHTML && cells[5].innerHTML  === cells[8].innerHTML && cells[2].innerHTML !== "";

        const checkConditionDiagonal1 = cells[0].innerHTML === cells[4].innerHTML && cells[4].innerHTML  === cells[8].innerHTML && cells[0].innerHTML !== "";
        const checkConditionDiagonal2 = cells[2].innerHTML === cells[4].innerHTML && cells[4].innerHTML  === cells[6].innerHTML && cells[2].innerHTML !== "";

        if (checkConditionRow1 === true || checkConditionRow2 === true || checkConditionRow3) {
          alert('S-a produs o linie orizontala castigatoare');
        }
        if (checkConditionColumn1 || checkConditionColumn2 || checkConditionColumn3) {
          alert('S-a produs o linie verticala castigatoare');
        }
        if (checkConditionDiagonal1 || checkConditionDiagonal2) {
          alert('S-a produs o linie diagonala castigatoare');
        }
      })
    }) 

    

</script>

<!--
Orizontala
* 0 1 2
* 3 4 5
* 6 7 8

Verticala
* 0 3 6
* 1 4 7
* 2 5 8

Diagoana
* 0 4 8
* 2 4 6
 -->