html-css-js/tic-tac-toe.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Modern Web Apps</title>

    <script>
      function draw(e) {
        //alert(e.target.id);
        squareId = e.target.id;
        squareNum = squareId.replace("square","");
        img = document.createElement("img");
        if (squareNum % 2 == 0) {
          img.setAttribute("src","chakra.png");
        } else {
          img.setAttribute("src","star.png");
        }
        img.setAttribute("style","width:100%; height:100%");
        square = document.getElementById(squareId);
        square.appendChild(img);
      }
    </script>
  </head>
  <body>
    <div>
      <div id="square1" onclick="draw(event)" style="height:33vh; width:33%; background-color: orange; float:left" >
      </div>
      <div id="square2" onclick="draw(event)" style="height:33vh; width:33%; background-color: gray; float:left" >
      </div>
      <div id="square3" onclick="draw(event)" style="height:33vh; width:33%; background-color: orange; float:left" >
      </div>
      <div id="square4" onclick="draw(event)" style="height:33vh; width:33%; background-color: gray; float:left" >
      </div>
      <div id="square5" onclick="draw(event)" style="height:33vh; width:33%; background-color: orange; float:left" >
      </div>
      <div id="square6" onclick="draw(event)" style="height:33vh; width:33%; background-color: gray; float:left" >
      </div>
      <div id="square7" onclick="draw(event)" style="height:33vh; width:33%; background-color: orange; float:left" >
      </div>
      <div id="square8" onclick="draw(event)" style="height:33vh; width:33%; background-color: gray; float:left" >
      </div>
      <div id="square9" onclick="draw(event)" style="height:33vh; width:33%; background-color: orange; float:left" >
      </div>
    </div>
  </body>
</html>