2.Expense Tracker

window.addEventListener("load", solve);

//TODO

function solve(){


    const BtnAdd= document.getElementById('add-btn');
    const UlList= document.getElementById('preview-list');
    const UlListExpense= document.getElementById('expenses-list');

    const BtnDelete= document.querySelector('#expenses .btn.delete');

    //input fields
   const ElExp=document.getElementById('expense');
   const Elamount=document.getElementById('amount');
   const Eldate= document.getElementById('date');

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

    if(ElExp.value=='' ||   Elamount.value=='' ||   Eldate.value==''){
        return;
    }

    const Elarticle=document.createElement('article');
    const elp1=document.createElement('p');
    elp1.textContent=`Type: ${ElExp.value}`;

    const elp2=document.createElement('p');
    elp2.textContent=`Amount: ${Elamount.value}$`;
    const elp3=document.createElement('p');
    elp3.textContent=`Date: ${Eldate.value}`;

    Elarticle.appendChild(elp1);
    Elarticle.appendChild(elp2);
    Elarticle.appendChild(elp3);

    const btnEdit=document.createElement('button');
    btnEdit.classList.add('btn', 'edit')
    btnEdit.textContent='edit';

    const BtnOk=document.createElement('button');
    BtnOk.classList.add('btn', 'ok')
    BtnOk.textContent='ok';


    const ContainerBtns=document.createElement('div');
    ContainerBtns.classList.add('buttons');

    ContainerBtns.appendChild(btnEdit);
    ContainerBtns.appendChild(BtnOk);

    const LiEl= document.createElement('li');
     LiEl.classList.add('expense-item');
    LiEl.appendChild(Elarticle);
    LiEl.appendChild(ContainerBtns);

    UlList.appendChild(LiEl);
    BtnAdd.setAttribute('disabled', 'disabled');

    ElExp.value='' ;
    Elamount.value='' ;
    Eldate.value='';

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

        let ListNodes= document.querySelectorAll('article p');
        let AllList=Array.from(ListNodes);

        ElExp.value=elp1.textContent.substring(6);
        Elamount.value=elp2.textContent.substring(8,AllList[1].textContent.length-1);
        Eldate.value=elp3.textContent.substring(6);

        UlList.removeChild(LiEl);
        BtnAdd.removeAttribute('disabled');
    })

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

        UlList.removeChild(LiEl);
        UlListExpense.appendChild(LiEl);
        LiEl.removeChild(ContainerBtns);
        BtnAdd.removeAttribute('disabled');
    })


   })

   BtnDelete.addEventListener('click',()=>{
    UlList.innerHTML='';
    UlListExpense.innerHTML='';
    })

}