3.ToDoList

function attachEvents() {

     const BtnLoad=document.getElementById('load-button');
    const BtnAdd= document.getElementById('add-button');
    const  baseURL='http://localhost:3030/jsonstore/tasks';

    const UlToDo=document.getElementById('todo-list');

    const InTitle= document.getElementById('title');
    let idtask='';
    const LoadData= async(e)=>{

        e.preventDefault();
        const response = await fetch(baseURL);
        const data= await response.json();
        console.log(Object.values(data));

        UlToDo.innerHTML='';
        for (const task of Object.values(data)) {


        const Els= document.createElement('span');
        Els.textContent=task.name;

        const BtnRemove= document.createElement('button');
        BtnRemove.textContent='Remove';
        BtnRemove.id=task._id;

        const BtnEdit= document.createElement('button');
        BtnEdit.textContent='Edit';
        BtnEdit.id=task._id;

        const Elli=document.createElement('li');
        Elli.appendChild(Els);
        Elli.appendChild(BtnRemove);
        Elli.appendChild(BtnEdit);

        UlToDo.appendChild(Elli);

        BtnRemove.addEventListener('click',async(event)=>{
            event.preventDefault();
            const response= await fetch(`${baseURL}/${task._id}`,{
                method:'DELETE'
             });

             Elli.remove();

             LoadData(event);
        })

        BtnEdit.addEventListener('click',(e)=>{

        idtask= task._id;

        const parentElement = e.target.parentElement;
        e.target.parentElement.innerHTML =
        `<input value='${e.target.parentElement.querySelector("span").textContent }'/>
         <button id=${e.target.id}  class='remove-button'>Remove</button>
          <button id=${e.target.id}  class='submit-button'>Submit</button>`;

          const BtnSubmit=document.querySelector('li  .submit-button');
          BtnSubmit.addEventListener('click',async(event)=>{
             const name= parentElement.querySelector('input').value;
             event.preventDefault();
    //make put request
    const response= await fetch(`${baseURL}/${idtask}`,{
        method:'PUT',
        headers:{
          'content-type':'application/json',
        },

        body:JSON.stringify({
          _id: idtask,
         name,


      })
      });
  InTitle.value='';
      LoadData(event);
          })



        })
    }
    }

    BtnLoad.addEventListener('click',LoadData);

    BtnAdd.addEventListener('click',async(event)=>{
        event.preventDefault();
        const name= InTitle.value;

    //create post request
  const response= await fetch(baseURL, {
    method :'POST',
    headers:{
    'content-type':'application/json',
    },
    body: JSON.stringify({name}),
    });

  LoadData(event);
    name.value='';

})
}