Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // 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();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement