index.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.0" />
    <title>My ToDo Applicaton</title>
  </head>
  <link rel="stylesheet" href="style.css">
  <body>
    <div id="container">
        <h1>ToDo List App</h1>
        <input placeholder="Add a task then Press Enter"  class="add-task" id="add" >

  </input>
  <span id="total-task">
    Total Task:<span id="task-counter">0</span></span>
<ul id="list">
 <!-- <li>
          <input type="checkbox" id="task1" data-id="12" class="custom-checkbox">
          <label for="task1">Buy groceries</label>
          <img src="bin.svg" class="delete" data-id="12" />
        </li> -->
</ul>
    </div>
<script src="script.js"></script>
  </body>
</html>