titled the app and added a delete completed button

Author: Ebrahim-Moqbel

Sprint-3/todo-list/index.html

@@ -1,40 +1,51 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>ToDo List</title>
-  <link rel="stylesheet" href="style.css" />
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ToDo List</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+      rel="stylesheet"
+    />
 
-  <script type="module" src="script.mjs"></script>
-</head>
-<body>
-  <div class="todo-container">
-    <h1>My ToDo List</h1>
+    <script type="module" src="script.mjs"></script>
+  </head>
+  <body>
+    <div class="todo-container">
+      <h1>My ToDo List</h1>
 
-    <div class="todo-input">
-      <input type="text" id="new-task-input" placeholder="Enter a new task..." />
-      <button id="add-task-btn">Add</button>
-    </div>
+      <div class="todo-input">
+        <input
+          type="text"
+          id="new-task-input"
+          placeholder="Enter a new task..."
+        />
+        <button id="add-task-btn">Add</button>
+        <button id="delete-completed-btn">Delete completed</button>
+      </div>
 
-    <ul id="todo-list" class="todo-list">      
-    </ul>
+      <ul id="todo-list" class="todo-list"></ul>
 
-    <!-- 
+      <!-- 
       This is a template for the To-do list item. 
       It can simplify the creation of list item node in JS script.
     -->
-    <template id="todo-item-template">
-      <li class="todo-item"> <!-- include class "completed" if the task completed state is true -->
-        <span class="description">Task description</span>
-        <div class="actions">
-          <button class="complete-btn"><span class="fa-solid fa-check" aria-hidden="true"></span></button>
-          <button class="delete-btn"><span class="fa-solid fa-trash" aria-hidden="true"></span></button>
-        </div>
-      </li>
-    </template>
-
-  </div>
-</body>
+      <template id="todo-item-template">
+        <li class="todo-item">
+          <!-- include class "completed" if the task completed state is true -->
+          <span class="description">Task description</span>
+          <div class="actions">
+            <button class="complete-btn">
+              <span class="fa-solid fa-check" aria-hidden="true"></span>
+            </button>
+            <button class="delete-btn">
+              <span class="fa-solid fa-trash" aria-hidden="true"></span>
+            </button>
+          </div>
+        </li>
+      </template>
+    </div>
+  </body>
 </html>