ToDoList

// TODO
function attachEvents() {

    const baseUrl= 'http://localhost:3030/jsonstore/tasks';

   // const ElementForm= document.querySelector('form');

    const ToDoList=  document.querySelector('#todo-list');
    const BtnLoadBtn= document.getElementById('load-button');
    const BtnAdd= document.getElementById('add-button');

    const ElementTitle= document.getElementById('title');

  let idtask;


    const LoadDoList= async(e)=>{

        e.preventDefault();
        const response= await fetch(baseUrl);
        const data= await response.json();

        console.log(Object.values(data));


        const li = document.getElementById('li');
        if(li != null){
          li.innerHTML='';
        }


        ToDoList.innerHTML='';

        for (const task of Object.values(data)) {

            const Elspan= document.createElement('span');
            Elspan.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 Ellementli=  document.createElement('li');
            Ellementli.appendChild(Elspan);
            Ellementli.appendChild(Btnremove);
            Ellementli.appendChild(BtnEdit);

            ToDoList.appendChild(Ellementli);

           Btnremove.addEventListener('click',()=>{

                const response=  fetch(`${baseUrl}/${task._id}`,{
                    method:'DELETE'
                 });

                 Ellementli.remove();
            });

            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>`;


           /*    parentElement.querySelector('.remove-button').addEventListener('click', ()=>{
        const response=  fetch(`${baseUrl}/${task._id}`,{
            method:'DELETE'
         });

         Ellementli.remove();
        });*/
       const BtnRemove=document.querySelector('li .remove-button');
       const BtnSubmit=document.querySelector('li  .submit-button');

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

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

             })
             });

             LoadDoList(event);
               })

            });

            // ElementTitle.value=task.name;


        };
    };

    BtnLoadBtn.addEventListener('click',LoadDoList);

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


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

      LoadDoList(event);

     ElementTitle.value='';
    })
}

attachEvents();