made edit button but not working

public/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="dist/index.js" type="module"></script>
     <!-- <link rel="stylesheet" href="../css/default.css" media="only screen" /> -->
-    <title>Document</title>
+    <title>To do list</title>
     <style>
       #list {
         list-style: none;

src/css/default.css

@@ -51,11 +51,18 @@ li {
   margin-bottom: 1.5%;
 }
 
-.deletebtn {
+.deletebtn,
+.editbtn {
   width: 4px;
   height: 4px;
-  background-color: orangered;
   border-radius: 50%;
   margin-top: 1.5%;
   cursor: pointer;
 }
+.deletebtn {
+  background-color: orangered;
+}
+
+.editbtn {
+  background-color: yellowgreen;
+}

src/index.ts

@@ -35,7 +35,9 @@ function addListItem(task: Task) {
   const item = document.createElement("li");
   const label = document.createElement("label");
   const deletebtn = document.createElement("button");
+  const editbtn = document.createElement("button");
   deletebtn.classList.add("deletebtn");
+  editbtn.classList.add("editbtn");
   const checkbox = document.createElement("input");
   checkbox.addEventListener("change", () => {
     task.completed = checkbox.checked; //with this, checkbox will be ticked
@@ -46,10 +48,14 @@ function addListItem(task: Task) {
   label.append(checkbox, task.title);
   item.append(label);
   item.append(deletebtn);
+  item.append(editbtn);
   list?.append(item);
   deletebtn.addEventListener("click", function () {
     item.parentNode?.removeChild(item);
   });
+  editbtn.addEventListener("click", function () {
+    label.blur();
+  });
 }
 
 function saveTasks() {