tictactowpractice.html

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    .leftSide {border-left: 3px solid orange;}
    .topSide {border-top: 3px solid orange;}
    #board {width: 600px;}
    div > div {
              border: 3px solid black;
              width: 190px;
              height: 190px;
              display: inline-block;
              }


  </style>
</head>
<body>

  <div id="board">
  

  </div>


<script>
      var board = document.getElementById("board");
    for(var i = 0; i < 9; ++i) {
      var newDiv = document.createElement("div");
      board.appendChild(newDiv);
      newDiv.innerHTML = i;
      newDiv.addEventListener("mouseenter", function(){
        this.style.backgroundColor="blue";
      });
      newDiv.addEventListener("mouseleave", function(){
        this.style.backgroundColor=null;
      });
    }


</script>

</body>
</html>