public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" type="text/css" href="/css/main.css" />

    <title>TODO Site</title>
  </head>
  <body>
    <script src="/js/main.js"></script>
    <div class="container">
      <h1>Remember the Tasks!</h1>
      <div class="row">
        <div class="col-md-4">
          <div class="my-3">
            <h4>Task Title</h4>
            <input
              id="newTaskContent"
              type="text"
              class="form-control"
              placeholder="task contents"
            />
          </div>
          <button
            class="btn btn-primary btn-lg btn-block"
            type="submit"
            onclick="createTask();"
          >
            Add
          </button>
        </div>
      </div>
      <div className="row p-2" id="tasksDiv"></div>
    </div>
  </body>
</html>