after josephfeedback I tried to refactor and fix the storing function but havent finished

src/index.ts

@@ -28,7 +28,7 @@ form?.addEventListener("submit", (e) => {
   tasks.push(newTask); //하나아이템 type then push, then it's uploaded(stored). <-wrote it after line 13
 
   addListItem(newTask);
-  input.value = ""; //clear the input type part, as you already made one to do item
+  input.value = ""; //clear the input type part, as you already made one to-do-item
 });
 
 function addListItem(task: Task) {
@@ -62,11 +62,12 @@ function addListItem(task: Task) {
   });
   editbtn.addEventListener("click", function () {
     label?.focus();
-    changeTask(item);
+    changeTask(item); //joseph 24th Oct 2022
   });
 }
 
 function saveTasks() {
+  const taskJSON = localStorage.getItem("TASKS") || "[]"; //hmm... 24 Oct
   localStorage.setItem("TASKS", JSON.stringify(tasks));
 }
 
@@ -76,19 +77,31 @@ function loadTasks(): Task[] {
   return JSON.parse(taskJSON); // if it's not null, return to the taskJSON. As : Task[] is written after func loadTasks(), it will specifically parse the array. Without it, it will parse anything
 }
 
-function changeTask(item) {
+function changeTask(item: any) {
-	var changer = document.createElement("input");
+  var changer = document.createElement("input"); //joseph created another input field next to the item (,which is clicked and to be modified.)
-	changer.className = "changer";
+  //I wanted to directly modify the item in the listed label, without making anothe input next to it.
-	var text =  item.firstChild.innerHTML;
+  changer.className = "changer";
-	changer.value = text.replace('<input type="checkbox">',"");
+  var writtenLabel = item.firstChild.innerHTML;
-	item.append(changer);
+  changer.value = writtenLabel.replace('<input type="checkbox">', "");
-	var button = document.createElement("button");
+  item.append(changer);
-	button.innerHTML = "X"
+  var button = document.createElement("button");
-	item.append(button);
+  button.innerHTML = "modify";
-	button.addEventListener("click", function (){
+  item.append(button);
-		item.firstChild.innerHTML = '<input type="checkbox">'+ changer.value;
+  button.addEventListener("click", function () {
-		changer.remove();
+    item.firstChild.innerHTML = '<input type="checkbox">' + changer.value;
-		button.remove();
+    changer.remove();
-		
+    button.remove();
-	});
+  }); //joseph 24th Oct 2022
+  console.log(item.firstChild);
+  console.log(item);
 }
+
+// function deleteTask(item: any) {
+//   const deletebtn = document.createElement("button");
+//   deletebtn.classList.add("deletebtn");
+
+//   item.append(deletebtn);
+//   deletebtn.addEventListener("click", function () {
+//     item.parentNode?.removeChild(item);
+//   });
+//} Wanting to refactor, I attempted to separate the deleteTask function here but failed. 24 Oct