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" />
    <meta name="description" content="creatd By Basil Pulikuth" />
    <title>Todo List || Basil pulikuth</title>

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

    <!-- font awesome linked -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
      integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="./font-awesome.css">

    <!-- link style -->
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="container">
      <div class="date-container">
        <h1 class="date">Monday , 9th</h1>

        <h5 class="month">March</h5>
        <h1 class="number-of-tasks">0 Task</h1>
      </div>

      <!-- task insert to this div -->

      <div class="task-list-container"></div>

      <div class="task-menu-container">
        <span id="all" class="active">All</span>
        <span id="Pending">Pending</span>
        <span id="Completed">Completed</span>
        <button type="button" class="clear-all-btn">Clear All</button>
      </div>

      <div class="input-div">
        <input
          type="text"
          name="text"
          id="task-input"
          class="task-input"
          placeholder="Enter Your Task"
        />
        <button class="add-task-btn">+</button>

        <!-- <div class="task-list">
          <label for="${id}">
            <input
              onclick="taskcompleted(this)"
              type="checkbox"
              id="${id}"
              class="checkbox"
              onclick="taskcomplete(this)"
              ${isCompleted}
            />
            <h3 class="task ${isCompleted}">${todo.name}</h3>
          </label>
          <i class="fa-solid fa-ellipsis" onclick="ShowMenu(this)"></i>
          <div class="menu">
            <span onclick="editTask(${id},`${todo.name}`)" class="edit-btn">
              <i class="fa-solid fa-pen"></i>
              Edit
            </span>
            <span onclick="deleteTask(${id},`${todo.name}`)" class="delete-btn">
              <i class="fa-solid fa-trash"></i>
              Delete
            </span>
            
          </div>
        </div> -->
  <!-- <spna><i class="fa-solid fa-clipboard-list"></i></spna>
  <span class="no-task-message">No task here yet</span>;
 -->

      </div>
    </div>
  </body>
</html>