Pet Me

function solve() {
    const [name,age,kind,owner]=Array.from(document.querySelectorAll('#container>input'));
    let adoption=document.querySelector('#adoption>ul');
    let adopted=document.querySelector('#adopted>ul');
    let addBtn=document.querySelector('#container>button');

    addBtn.addEventListener('click',(ev)=>{
        ev.preventDefault();
        if(!name.value|| !Number(age.value)|| ! kind.value || !owner.value){
            return;
        }

        let li=el('li',undefined,undefined);
        let p=el('p',undefined,undefined);
        let strong1=el('strong',name.value);
        p.appendChild(strong1)
        p.append(' is a');
        let strong2=el('strong',age.value);
        p.appendChild(strong2);
        p.append(' years old');
        let strong3=el('strong',kind.value);

        p.appendChild(strong3);

        let span=el('span',`Owner: ${owner.value}`);
        let button=el('button','Contact with owner');
        li.appendChild(p);
        li.appendChild(span);
        li.appendChild(button);

        adoption.appendChild(li);

        name.value='';
        age.value='';
        kind.value='';
        owner.value='';

        button.addEventListener('click',()=>{
            li.removeChild(button);
            let takeItBtn=el('button','Yes! I take it!');
            let div=el('div',undefined,undefined);
            let input=el('input');
            input.placeholder='Enter your names';

            div.appendChild(input);
            div.appendChild(takeItBtn);
            li.appendChild(div);



            takeItBtn.addEventListener('click',()=>{
                span.textContent=`New Owner: ${input.value}`;

                if (!input.value) { return; }

                li.removeChild(div);
                let checkedBtn=el('button','Checked');
                li.appendChild(checkedBtn);
                adopted.appendChild(li);

                checkedBtn.addEventListener('click',()=>{
                    li.remove();
                })
            })
        })
    })

    function el(type,text,className){
        let result=document.createElement(type);
        if(text){
            result.textContent=text;
        }

        if(className){
            result.className=className;
        }

        return result;
    }
}