How can I build Tic Tac Toe game without using JavaScript?

Question

I was able to build the Tic Tac Toe game using JavaScript or Reactjs. It works well. But for now, I am trying to build it without using any JavaScript code. Can I build it just using CSS?

I tried to use CSS variables and selectors but no luck yet.

@mixin winners($val) {
    //1st line
    #pos11-#{$val}:checked ~ #pos12-#{$val}:checked ~ #pos13-#{$val}:checked ~ #win-#{$val},
    //2nd line
    #pos21-#{$val}:checked ~ #pos22-#{$val}:checked ~ #pos23-#{$val}:checked ~ #win-#{$val},
    //3rd line
    #pos31-#{$val}:checked ~ #pos32-#{$val}:checked ~ #pos33-#{$val}:checked ~ #win-#{$val},
    //1st column
    #pos11-#{$val}:checked ~ #pos21-#{$val}:checked ~ #pos31-#{$val}:checked ~ #win-#{$val},
    //2nd column
    #pos12-#{$val}:checked ~ #pos22-#{$val}:checked ~ #pos32-#{$val}:checked ~ #win-#{$val},
    //3rd column
    #pos13-#{$val}:checked ~ #pos23-#{$val}:checked ~ #pos33-#{$val}:checked ~ #win-#{$val},
    //1st diagonal
    #pos11-#{$val}:checked ~ #pos22-#{$val}:checked ~ #pos33-#{$val}:checked ~ #win-#{$val},
    //2nd diagonal
    #pos13-#{$val}:checked ~ #pos22-#{$val}:checked ~ #pos31-#{$val}:checked ~ #win-#{$val} {
        display:block;
        & ~ #no-winner {
            display:none;
        }
    }
}

Answer 1

Totally agree. You can build the TicTacToe game using CSS only. In this case, modern browsers that support vw units, css counter, and css variables only can work!

Here's the html code:

<form>
  <div class="board-wrapper">
    <div class="board-outer">
      <div class="board">
        <div class="board-inner">
          <input type="radio" name="pos11" id="pos11-blue" class="blue" required>
          <input type="radio" name="pos11" id="pos11-red" class="red" required>
          <div class="marque"></div>

          <input type="radio" name="pos12" id="pos12-blue" class="blue" required>
          <input type="radio" name="pos12" id="pos12-red" class="red" required>
          <div class="marque"></div>

          <input type="radio" name="pos13" id="pos13-blue" class="blue" required>
          <input type="radio" name="pos13" id="pos13-red" class="red" required>
          <div class="marque"></div>

          <input type="radio" name="pos21" id="pos21-blue" class="blue" required>
          <input type="radio" name="pos21" id="pos21-red" class="red" required>
          <div class="marque"></div>

          <input type="radio" name="pos22" id="pos22-blue" class="blue" required>
          <input type="radio" name="pos22" id="pos22-red" class="red" required>
          <div class="marque"></div>

          <input type="radio" name="pos23" id="pos23-blue" class="blue" required>
          <input type="radio" name="pos23" id="pos23-red" class="red" required>
          <div class="marque"></div>

          <input type="radio" name="pos31" id="pos31-blue" class="blue" required>
          <input type="radio" name="pos31" id="pos31-red" class="red" required>
          <div class="marque"></div>

          <input type="radio" name="pos32" id="pos32-blue" class="blue" required>
          <input type="radio" name="pos32" id="pos32-red" class="red" required>
          <div class="marque"></div>

          <input type="radio" name="pos33" id="pos33-blue" class="blue" required>
          <input type="radio" name="pos33" id="pos33-red" class="red" required>
          <div class="marque"></div>

          <div id="win-blue" class="win-message"><div class="wrapper">Blue wins!</div></div>
          <div id="win-red" class="win-message"><div class="wrapper">Red wins!</div></div>
          <div id="no-winner" class="win-message"><div class="wrapper">It's a draw!</div></div>
        </div>
      </div>
    </div>
  </div>
  <div class="actions">
    <button type="reset">Restart</button>
  </div>
</form>

And I tried to write the CSS here