2.Expense Tracker

function solve(){
    const ElementExpense=document.getElementById('expense');
    const Elementamount=document.getElementById('amount');
    const Elementdate=document.getElementById('date');
    const BtnAdd=document.getElementById('add-btn');
    const elementUl= document.getElementById('preview-list');
    const expenseElement= document.getElementById('expenses-list');
    const BtnDelete= document.querySelector('.btn.delete');


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

    BtnAdd.addEventListener('click',()=>{
       /* console.log(ElementExpense.value);
        console.log(Elementamount.value);
        console.log(Elementdate.value);*/

        if(!ElementExpense.value || !Elementamount.value || !Elementdate.value){
           return;
        }

        let firstp=document.createElement('p');

        firstp.textContent=`Type: ${ElementExpense.value}`;
        let secondp=document.createElement('p');
        secondp.textContent=`Amount: ${Elementamount.value}$`;
        let thirdp=document.createElement('p');
        thirdp.textContent=`Date: ${Elementdate.value}`;

        const ElementArticle= document.createElement('article');
        ElementArticle.appendChild(firstp);
        ElementArticle.appendChild(secondp);
        ElementArticle.appendChild(thirdp);

        const Elementli=document.createElement('li');
        const DivBtns= document.createElement('div');
        DivBtns.classList.add('buttons');
        const btnedit=document.createElement('button');
        const btnok=document.createElement('button');

        btnedit.classList.add('btn','edit');
        btnedit.textContent='EDIT';
        btnok.classList.add('btn','ok');
        btnok.textContent='OK';

        DivBtns.appendChild(btnedit);
        DivBtns.appendChild(btnok);
        Elementli.classList.add('expense-item');

        Elementli.appendChild(ElementArticle);
        elementUl.appendChild(Elementli);
        Elementli.appendChild(DivBtns);

         ElementExpense.value='';
         Elementamount.value='';
         Elementdate.value='';
         BtnAdd.setAttribute('disabled','disabled');

        btnedit.addEventListener('click',()=>{
           let ListNodes= document.querySelectorAll('article p');
           let AllList=Array.from(ListNodes);

           ElementExpense.value=AllList[0].textContent.substring(6);
           Elementamount.value=AllList[1].textContent.substring(8,AllList[1].textContent.length-1);
           Elementdate.value=AllList[2].textContent.substring(6);
           Elementli.remove();
           BtnAdd.removeAttribute('disabled');
        });

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

            expenseElement.appendChild(Elementli);
            DivBtns.remove();
            BtnAdd.removeAttribute('disabled');
        });

});
}