Untitled

import "./styles.css";

document.getElementById("app").innerHTML = `
<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="src/styles.css">
</head>

<body>
    <div id="app">
        <h1>Tic Tac Toe</h1>
        <table id="board">
        <tr>
            <td id="c00" onclick="draw(0,0)"></td>
            <td id="c01" onclick="draw(0,1)"></td>
            <td id="c02" onclick="draw(0,2)"></td>
            <td id="c03" onclick="draw(0,3)"></td>
          <td id="c04" onclick="draw(0,4)"></td>
          </tr>
          <tr>
            <td id="c10"></td>
            <td id="c11"></td>
            <td id="c12"></td>
            <td id="c13"></td>
            <td id="c14"></td>
         </tr>
          <tr>
            <td id="c20"></td>
            <td id="c21"></td>
            <td id="c22"></td>
            <td id="c23"></td>
            <td id="c24"></td>
          </tr>
          <tr>
            <td id="c30"></td>
            <td id="c31"></td>
            <td id="c32"></td>
            <td id="c33"></td>
          <td id="c34"></td>
         </tr>
         <tr>
            <td id="c40"></td>
            <td id="c41"></td>
            <td id="c42"></td>
            <td id="c43"></td>
          <td id="c44"></td>
          </tr>
        </table>
  </div>
</body>

</html>`;

window.board = [
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0]
];

window.turn = 1; // 1 is X's turn and two is O's turn

window.draw = (row, column) => {
  var cellId = "c" + row + column;
  if (turn == 1) {
    document.getElementById(cellId).innerHTML = "X";
    turn = 2;
  } else {
    document.getElementById(cellId).innerHTML = "O";
    turn = 1;
  }
  return;
}