index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/dist//main.css" />
    <title>TodoList With TypeScript OOP</title>
  </head>
  <body>
    <!-- Todo Template -->
    <template id="todoTemp">
      <li draggable="true">
        <h3></h3>
        <p></p>
        <span></span>
      </li>
    </template>

    <!-- Todo List Template -->
    <template id="todoListTemp">
      <div class="Todo-list">
        <h2></h2>
        <ul></ul>
      </div>
    </template>

    <!-- Add Todo Template -->
    <template id="todoAddTemp">
      <form class="add-Todo">
        <div class="form-control">
          <label for="title">title</label>
          <input id="title" type="text" />
        </div>
        <div class="form-control">
          <label for="Description">Description</label>
          <input id="Description" type="text" />
        </div>
        <div class="form-control">
          <label for="Priority">Priority</label>
          <select id="Priority">
            <option value="low">low</option>
            <option value="medium">medium</option>
            <option value="high">high</option>
          </select>
        </div>
        <button>Add new todo</button>
      </form>
    </template>

    <!-- Main App -->
    <div class="container">
      <header>
        <div class="logo"><b>Todo Management</b></div>
      </header>
      <div></div>
      <div id="app">
        <div class="Todos" id="todos"></div>
      </div>
      <script type="module" src="dist/bundle.js"></script>
    </div>
  </body>
</html>