Advertisement
Silviya7

WeatherTracker

May 16th, 2024
536
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //TODO...
  2.  const baseURL='http://localhost:3030/jsonstore/tasks';
  3.  
  4.     const BtnLoad= document.getElementById('load-history');
  5.     const ElList= document.getElementById('list');
  6.  
  7.     const btnEditw= document.getElementById('edit-weather');
  8.     const btnAddWeather= document.getElementById('add-weather');
  9.  
  10.     const Inputlocation=document.getElementById('location');
  11.     const Inputtemperature=document.getElementById('temperature');
  12.     const Inputdate=document.getElementById('date');
  13.     let idtown;
  14.  
  15.     const Loadweather= async()=>{
  16.         const response= await fetch(baseURL);
  17.         const data= await response.json();
  18.         console.log(Object.values(data));
  19.  
  20.  
  21.         ElList.innerHTML='';
  22.         for (const town of Object.values(data)) {
  23.            
  24.             const Elh1= document.createElement('h2');
  25.             Elh1.textContent= town. location;
  26.             const Elh2= document.createElement('h3');
  27.             Elh2.textContent= town.date;
  28.             const Elh3= document.createElement('h3');
  29.             Elh3.textContent= town.temperature;
  30.  
  31.             const BtnChange= document.createElement('button');
  32.             BtnChange.classList.add('change-btn');
  33.             BtnChange.textContent='Change';
  34.  
  35.             const BtnDelete= document.createElement('button');
  36.             BtnDelete.classList.add('delete-btn');
  37.             BtnDelete.textContent='Delete';
  38.  
  39.             const containerButtons= document.createElement('div');
  40.             containerButtons.classList.add('button-container');
  41.  
  42.             containerButtons.appendChild(BtnChange);
  43.             containerButtons.appendChild(BtnDelete);
  44.  
  45.             const ElContainer=  document.createElement('div');
  46.             ElContainer.classList.add('container');
  47.             ElContainer.appendChild(Elh1);
  48.             ElContainer.appendChild(Elh2);
  49.             ElContainer.appendChild(Elh3);
  50.             ElContainer.appendChild(containerButtons);
  51.             ElList.appendChild(ElContainer);
  52.  
  53.             BtnChange.addEventListener('click',()=>{
  54.  
  55.                 idtown= town._id;
  56.                 Inputlocation.value=town.location;
  57.                 Inputtemperature.value=town.temperature;
  58.                 Inputdate.value= town.date;
  59.                 btnEditw.removeAttribute('disabled');
  60.                 btnAddWeather.setAttribute('disabled','disabled');
  61.                
  62.                 ElContainer.remove();
  63.             });
  64.  
  65.             BtnDelete.addEventListener('click',async()=>{
  66.                
  67.             const response= await fetch(`${baseURL}/${town._id}`,{
  68.                 method:'DELETE'
  69.              });
  70.  
  71.              ElContainer.remove();
  72.             })
  73.  
  74.         }
  75.  
  76.         btnEditw.setAttribute('disabled','disabled')
  77.  
  78.     }
  79.  
  80.  
  81.     BtnLoad.addEventListener('click',Loadweather);
  82.  
  83.     btnAddWeather.addEventListener('click',async()=>{
  84.         const location=Inputlocation.value;
  85.         const temperature=Inputtemperature.value;
  86.         const date=Inputdate.value;
  87.  
  88.        
  89.   const response= await fetch(baseURL, {
  90.     method :'POST',
  91.     headers:{
  92.     'content-type':'application/json',
  93.     },
  94.     body: JSON.stringify({location,temperature,date }),
  95.     });
  96.  
  97.   Inputlocation.value="";
  98.   Inputtemperature.value="";
  99.   Inputdate.value="";
  100.    await Loadweather();
  101.  
  102.  
  103.     });
  104.  
  105.     btnEditw.addEventListener('click',async()=>{
  106.  
  107.         const location=Inputlocation.value;
  108.         const temperature=Inputtemperature.value;
  109.         const date=Inputdate.value;
  110.          //make put request
  111.     const response= await fetch(`${baseURL}/${idtown}`,{
  112.         method:'PUT',
  113.         headers:{
  114.           'content-type':'application/json',
  115.         },
  116.    
  117.         body:JSON.stringify({
  118.           _id: idtown,
  119.          location,
  120.          temperature,
  121.          date
  122.    
  123.       })
  124.       });
  125.    
  126.     Loadweather();
  127.  
  128.        btnAddWeather.removeAttribute('disabled');
  129.        btnEditw.setAttribute('disabled'),'disabled';
  130.     })
  131.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement