Step 3

The style.css is not of interest to us except to note we use CSS selectors x and o to style a cell that is marked by the cross or the naught marker. That is, when a player marks a cell, you must add the class name x or o to its class attribute. Let's make a concrete example to better understand the process.

  • Open index.html in your favorite browser (Chrome is recommended).
  • Open the browser console (Developer Tools).
  • Run the following command to mark the first cell with a cross: 
    let cell = document.getElementById("0");
cell.classList.add("x");

Exercise mark the board's middle cell with a naught.

Solution 
cell = document.getElementById("4");
cell.classList.add("o");