Advertisement
Silviya7

ToDoList

May 22nd, 2024 (edited)
502
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // TODO
  2. function attachEvents() {
  3.  
  4.     const baseUrl= 'http://localhost:3030/jsonstore/tasks';
  5.  
  6.    // const ElementForm= document.querySelector('form');
  7.  
  8.     const ToDoList=  document.querySelector('#todo-list');
  9.     const BtnLoadBtn= document.getElementById('load-button');
  10.     const BtnAdd= document.getElementById('add-button');
  11.  
  12.     const ElementTitle= document.getElementById('title');
  13.  
  14.   let idtask;
  15.  
  16.  
  17.     const LoadDoList= async(e)=>{
  18.  
  19.         e.preventDefault();
  20.         const response= await fetch(baseUrl);
  21.         const data= await response.json();
  22.  
  23.         console.log(Object.values(data));
  24.  
  25.  
  26.         const li = document.getElementById('li');
  27.         if(li != null){
  28.           li.innerHTML='';
  29.         }
  30.        
  31.  
  32.         ToDoList.innerHTML='';
  33.  
  34.         for (const task of Object.values(data)) {
  35.            
  36.             const Elspan= document.createElement('span');
  37.             Elspan.textContent=task.name;
  38.  
  39.             const Btnremove= document.createElement('button');
  40.             Btnremove.textContent='Remove';
  41.             Btnremove.id= task._id;
  42.  
  43.             const BtnEdit= document.createElement('button');
  44.             BtnEdit.textContent='Edit';
  45.             BtnEdit.id= task._id;
  46.  
  47.             const Ellementli=  document.createElement('li');
  48.             Ellementli.appendChild(Elspan);
  49.             Ellementli.appendChild(Btnremove);
  50.             Ellementli.appendChild(BtnEdit);
  51.  
  52.             ToDoList.appendChild(Ellementli);
  53.  
  54.            Btnremove.addEventListener('click',()=>{
  55.                
  56.                 const response=  fetch(`${baseUrl}/${task._id}`,{
  57.                     method:'DELETE'
  58.                  });
  59.      
  60.                  Ellementli.remove();
  61.             });
  62.  
  63.             BtnEdit.addEventListener('click',(e)=>{
  64.                 idtask= task._id;
  65.                 const parentElement = e.target.parentElement;
  66.                 e.target.parentElement.innerHTML = `<input value='${
  67.                  e.target.parentElement.querySelector("span").textContent
  68.                }'/><button id=${e.target.id}  class='remove-button'>Remove</button>
  69.                   <button id=${e.target.id}  class='submit-button'>Submit</button>`;
  70.  
  71.  
  72.            /*    parentElement.querySelector('.remove-button').addEventListener('click', ()=>{
  73.         const response=  fetch(`${baseUrl}/${task._id}`,{
  74.             method:'DELETE'
  75.          });
  76.  
  77.          Ellementli.remove();
  78.         });*/
  79.        const BtnRemove=document.querySelector('li .remove-button');
  80.        const BtnSubmit=document.querySelector('li  .submit-button');
  81.    
  82.        BtnSubmit.addEventListener('click',async(event)=>{
  83.             event. preventDefault();
  84.             const name=parentElement.querySelector('input').value;
  85.                 //make put request
  86.             const response= await fetch(`${baseUrl}/${idtask}`,{
  87.             method:'PUT',
  88.             headers:{
  89.               'content-type':'application/json',
  90.              },
  91.    
  92.              body:JSON.stringify({
  93.              _id: idtask,
  94.               name
  95.    
  96.              })
  97.              });
  98.  
  99.              LoadDoList(event);
  100.                })
  101.  
  102.             });
  103.              
  104.             // ElementTitle.value=task.name;
  105.          
  106.        
  107.         };
  108.     };
  109.  
  110.     BtnLoadBtn.addEventListener('click',LoadDoList);
  111.  
  112.     BtnAdd.addEventListener('click', async(event)=>{
  113.     event. preventDefault();
  114.     const name=ElementTitle.value;
  115.  
  116.        
  117.   const response= await fetch(baseUrl, {
  118.     method :'POST',
  119.     headers:{
  120.     'content-type':'application/json',
  121.     },
  122.     body: JSON.stringify({name}),
  123.     });
  124.  
  125.       LoadDoList(event);
  126.      
  127.      ElementTitle.value='';
  128.     })
  129. }
  130.  
  131. attachEvents();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement