JS advanced

window.addEventListener('load', solve);

function solve() {

    const input = {
        typeProduct: document.getElementById('type-product'),
        description: document.getElementById('description'),
        clientName: document.getElementById('client-name'),
        clientPhone: document.getElementById('client-phone')
    }

    const wrapper = {
        recievedOrdres: document.getElementById('received-orders'),
        completedOrders: document.getElementById('completed-orders')

    }


    document.getElementsByTagName('button')[0].addEventListener('click', send)
    document.getElementsByTagName('button')[1].addEventListener('click', clear)

    console.log(input);


    function send(e){
        event.preventDefault();

        const typeProduct = input.typeProduct.value;
        const description = input.description.value;
        const clientName = input.clientName.value;
        const clientPhone = input.clientPhone.value;

        if (description == '' || clientName == '' || clientPhone =='') {
            return;
        }

        const div = document.createElement('div');

        div.className = 'container';
        div.innerHTML = `<h2>Product type for repair: ${typeProduct}</h2>
                         <h3>Client information: ${clientName}, ${clientPhone}</h3>
                         <h4>Description of the problem: ${description}</h4>
                         <button class="start-btn">Start repair</button>
                         <button class="finish-btn" disabled>Finish repair</button>`;


        wrapper.recievedOrdres.appendChild(div);

        input.description.value = '';
        input.clientName.value = '';
        input.clientPhone.value = '';



        function repair(){

        }

        function finish(){

        }
    }


    function clear(){


    }

}