Daily Calorie Counter

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

const BtnLoadMeals= document.getElementById('load-meals');
const BtnAddMeal=document.getElementById('add-meal');
const BtnEdit= document.getElementById('edit-meal');

const ElementList= document.getElementById('list');

const Elementfood= document.getElementById('food');
const Elementtime= document.getElementById('time');
const Elementcalories= document.getElementById('calories');
let idmeal;

    const LoadMeals = async()=> {
    //Fetch all meals
    const response = await fetch(baseURL);
    const data= await response.json();
   // console.log(Object.values(data));

    ElementList.innerHTML='';

    for (const meal of Object.values(data)) {
        const mealBtndiv= document.createElement('div');
        mealBtndiv.id='meal-buttons';

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

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

        mealBtndiv.appendChild(BtnChange);
        mealBtndiv.appendChild(BtnDelete);

        idmeal= meal._id;
        const Elementh1=document.createElement('h2');
        Elementh1.textContent= meal.food;
        const Elementhtime3=document.createElement('h3');
        Elementhtime3.textContent= meal.time;
        const Elementhcalories3=document.createElement('h3')
        Elementhcalories3.textContent= meal.calories;

        const divMeal= document.createElement('div');
        divMeal.classList.add('meal');
        divMeal.appendChild(Elementh1);
        divMeal.appendChild(Elementhtime3);
        divMeal.appendChild(Elementhcalories3);
        divMeal.appendChild(mealBtndiv);

        ElementList.appendChild(divMeal);

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

            //save currentid
            idmeal= meal._id;

            Elementfood.value=meal.food;
            Elementtime.value= meal.time;
            Elementcalories.value= meal.calories;

            BtnEdit.removeAttribute('disabled');
            BtnAddMeal.setAttribute('disabled','disabled');

            divMeal.remove();
        });

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

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

            divMeal.remove();
        });

    }

    };

BtnLoadMeals.addEventListener('click',LoadMeals);

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

    const food= Elementfood.value;
    const time= Elementtime.value;
    const calories= Elementcalories.value;
  //create post request

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

  await LoadMeals();
   Elementfood.value="";
   Elementtime.value="";
   Elementcalories.value="";
});

BtnEdit.addEventListener('click',async()=>{
    const food= Elementfood.value;
    const time= Elementtime.value;
    const calories=Elementcalories.value;

    //make put request
    const response= await fetch(`${baseURL}/${idmeal}`,{
      method:'PUT',
      headers:{
        'content-type':'application/json',
      },

      body:JSON.stringify({
        _id: idmeal,
       food,
       calories,
       time

    })
    });

    LoadMeals();
    BtnEdit.setAttribute('disabled','disabled');

    BtnAddMeal.removeAttribute('disabled');
    idmeal=null;

})