WeatherTracker

//TODO...
 const baseURL='http://localhost:3030/jsonstore/tasks';

    const BtnLoad= document.getElementById('load-history');
    const ElList= document.getElementById('list');

    const btnEditw= document.getElementById('edit-weather');
    const btnAddWeather= document.getElementById('add-weather');

    const Inputlocation=document.getElementById('location');
    const Inputtemperature=document.getElementById('temperature');
    const Inputdate=document.getElementById('date');
    let idtown;

    const Loadweather= async()=>{
        const response= await fetch(baseURL);
        const data= await response.json();
        console.log(Object.values(data));


        ElList.innerHTML='';
        for (const town of Object.values(data)) {

            const Elh1= document.createElement('h2');
            Elh1.textContent= town. location;
            const Elh2= document.createElement('h3');
            Elh2.textContent= town.date;
            const Elh3= document.createElement('h3');
            Elh3.textContent= town.temperature;

            const BtnChange= document.createElement('button');
            BtnChange.classList.add('change-btn');
            BtnChange.textContent='Change';

            const BtnDelete= document.createElement('button');
            BtnDelete.classList.add('delete-btn');
            BtnDelete.textContent='Delete';

            const containerButtons= document.createElement('div');
            containerButtons.classList.add('button-container');

            containerButtons.appendChild(BtnChange);
            containerButtons.appendChild(BtnDelete);

            const ElContainer=  document.createElement('div');
            ElContainer.classList.add('container');
            ElContainer.appendChild(Elh1);
            ElContainer.appendChild(Elh2);
            ElContainer.appendChild(Elh3);
            ElContainer.appendChild(containerButtons);
            ElList.appendChild(ElContainer);

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

                idtown= town._id;
                Inputlocation.value=town.location;
                Inputtemperature.value=town.temperature;
                Inputdate.value= town.date;
                btnEditw.removeAttribute('disabled');
                btnAddWeather.setAttribute('disabled','disabled');

                ElContainer.remove();
            });

            BtnDelete.addEventListener('click',async()=>{

            const response= await fetch(`${baseURL}/${town._id}`,{
                method:'DELETE'
             });

             ElContainer.remove();
            })

        }

        btnEditw.setAttribute('disabled','disabled')

    }


    BtnLoad.addEventListener('click',Loadweather);

    btnAddWeather.addEventListener('click',async()=>{
        const location=Inputlocation.value;
        const temperature=Inputtemperature.value;
        const date=Inputdate.value;


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

  Inputlocation.value="";
  Inputtemperature.value="";
  Inputdate.value="";
   await Loadweather();


    });

    btnEditw.addEventListener('click',async()=>{

        const location=Inputlocation.value;
        const temperature=Inputtemperature.value;
        const date=Inputdate.value;
         //make put request
    const response= await fetch(`${baseURL}/${idtown}`,{
        method:'PUT',
        headers:{
          'content-type':'application/json',
        },

        body:JSON.stringify({
          _id: idtown,
         location,
         temperature,
         date

      })
      });

    Loadweather();

       btnAddWeather.removeAttribute('disabled');
       btnEditw.setAttribute('disabled'),'disabled';
    })