Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- const baseURL='http://localhost:3030/jsonstore/tasks';
- const btnLoad= document.getElementById('load-vacations');
- const listList= document.getElementById('list');
- const BtnAddVacation= document.getElementById('add-vacation');
- const BtnEditVacation= document.getElementById('edit-vacation');
- const Elementname= document.getElementById('name');
- const Elementdays=document.getElementById('num-days');
- const Elementdate=document.getElementById('from-date');
- const DoneBtn= document.getElementById('done-btn');
- let idvacation;
- const LoadVacations= async()=> {
- const response = await fetch(baseURL);
- const data= await response.json();
- console.log(Object.values(data));
- listList.innerHTML='';
- for (const vac of Object.values(data)) {
- const Elementh1=document.createElement('h2');
- Elementh1.textContent=vac.name;
- const Elementh2=document.createElement('h3');
- Elementh2.textContent=vac.date;
- const Elementh3=document.createElement('h3');
- Elementh3.textContent=vac.days;
- const btnChange=document.createElement('button');
- btnChange.classList.add('change-btn');
- btnChange.textContent='Change';
- const btnDone=document.createElement('button');
- btnDone.classList.add('done-btn');
- btnDone.textContent='Done';
- const Containerdiv=document.createElement('div');
- Containerdiv.classList.add('container');
- Containerdiv.appendChild(Elementh1);
- Containerdiv.appendChild(Elementh2);
- Containerdiv.appendChild(Elementh3);
- Containerdiv.appendChild(btnChange);
- Containerdiv.appendChild(btnDone);
- listList.appendChild(Containerdiv);
- btnChange.addEventListener('click',()=>{
- Containerdiv.remove();
- Elementname.value=vac.name;
- Elementdays.value=vac.days;
- Elementdate.value= vac.date;
- BtnEditVacation.removeAttribute('disabled');
- BtnAddVacation.setAttribute('disabled','disabled');
- idvacation=vac._id;
- });
- btnDone.addEventListener('click',async()=>{
- const response= await fetch(`${baseURL}/${vac._id}`,{
- method:'DELETE'
- });
- Containerdiv.remove();
- })
- }
- }
- btnLoad.addEventListener('click',LoadVacations);
- BtnAddVacation.addEventListener('click',async(e)=>{
- e.preventDefault();
- const name= Elementname.value;
- const days= Elementdays.value;
- const date= Elementdate.value;
- const response= await fetch(baseURL, {
- method :'POST',
- headers:{
- 'content-type':'application/json',
- },
- body: JSON.stringify({name,days,date }),
- });
- await LoadVacations();
- Elementname.value="";
- Elementdays.value="";
- Elementdate.value="";
- })
- BtnEditVacation.addEventListener('click',async(e)=>{
- e.preventDefault();
- const name= Elementname.value;
- const days= Elementdays.value;
- const date= Elementdate.value;
- //make put request
- const response= await fetch(`${baseURL}/${idvacation}`,{
- method:'PUT',
- headers:{
- 'content-type':'application/json',
- },
- body:JSON.stringify({
- _id: idvacation,
- name,
- days,
- date
- })
- });
- LoadVacations();
- BtnAddVacation.removeAttribute('disabled');
- BtnEditVacation.setAttribute('disabled','disabled');
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement