script.js

let input=document.querySelector("input");
let addbtn=document.querySelector("#Add_btn");
let list=document.querySelector("#to-do-list");

const saved=localStorage.getItem('todos');
const todos=saved? JSON.parse(saved):[];
function savetodos(){
    localStorage.setItem('todos',JSON.stringify(todos));
}

function createTodoList(todo,idx){
    const li=document.createElement("li");
    const checkbox=document.createElement("input");
    checkbox.type="checkbox"
    checkbox.checked=!!todo.completed;
    checkbox.addEventListener("change",()=>{
        todo.completed=checkbox.checked;
        savetodos();
        render();
    })
//    text of the todos
  const textspan=document.createElement("span");
  textspan.textContent=todo.text;
  textspan.style.marginBottom="7px";

  if(todo.completed){
    textspan.style.textDecoration = "line-through";
  }
  textspan.addEventListener("dblclick",()=>{
        const newtext=prompt("Edit Text",todo.text);
        if(newtext!=null){
            todo.text=newtext;
            textspan.textContent=todo.text;
            savetodos();
        }

    })
//   Delete button
  const Delete=document.createElement("button");
  Delete.textContent="Delete";
  Delete.addEventListener("click",()=>{
    todos.splice(idx,1);
    render();
    savetodos();
  })
//   append to list
li.appendChild(checkbox);
li.appendChild(textspan);
li.appendChild(Delete);
return li;

}

function render(){
    list.innerHTML='';
    todos.forEach((todo,idx) => {
        const node=createTodoList(todo,idx);    
        list.appendChild(node);
    });
}

function addtoDo(){
    const text=input.value.trim();
    if(!text){
        return;
    }
    todos.push({text,completed:false});
    input.value='';
    render();
    savetodos();
}
addbtn.addEventListener("click",addtoDo);
render();