index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">  </head>
    <link rel="stylesheet" href="style.css">
  <body>
    <center>
      <br>
      <h1>Welcome to the JavaScript Tic Tac Toe</h1>
      <div class="scoreboard">
        <div id="timer">
          --:--:--
        </div>
        <div id="winner">
          <span style="color:red;">No Winner Yet</span>
        </div>
      </div>
      <div>
        <h3 id="turn">click start to play</h3>
      </div>
    </center>
    <div class="container-cell">
      <div class="cell" id="c1">
        <h1 class="the-play"></h1>
      </div>
      <div class="cell" id="c2">
        <h1 class="the-play"></h1>
      </div>
      <div class="cell" id="c3">
        <h1 class="the-play"></h1>
      </div>
      <div class="cell" id="c4">
        <h1 class="the-play"></h1>
      </div>
      <div class="cell" id="c5">
        <h1 class="the-play"></h1>
      </div>
      <div class="cell" id="c6">
        <h1 class="the-play"></h1>
      </div>
      <div class="cell" id="c7">
        <h1 class="the-play"></h1>
      </div>
      <div class="cell" id="c8">
        <h1 class="the-play"></h1>
      </div>
      <div class="cell" id="c9">
        <h1 class="the-play"></h1>
      </div>
    </div>
    <br>
    <br>

    <form id="game-form">
      <div>
        <input type="radio" name="gameMode" id="gameMode" value="pvp" checked>
        <label for="pvp">Player Vs. Player</label>
        <input type="radio" name="gameMode" id="gameMode" value="pvc">
        <label for="pvc">Player Vs. Computer</label>
      </div>
      <button type="button" name="start" id="startBtn">start</button>


    </form>
    <script src="main.js"></script>

  </body>
</html>