mailsDelivery

function solve() {
    let ulListMails = document.getElementById('list');
    let ulSentList = document.getElementsByClassName('sent-list')[0];
    let ulDeleteList = document.querySelector('.delete-list');

    let inpRecip = document.getElementById('recipientName');
    let inpTitle = document.getElementById('title');
    let textArea = document.getElementById('message');

    let addBtn = document.getElementById('add');
    let resetBtn = document.getElementById('reset');

    resetBtn.addEventListener('click', (ev) => {
        ev.preventDefault();
        inpRecip.value = '';
        inpTitle.value = '';
        textArea.value = '';
    });

    addBtn.addEventListener('click', addMail);

    function addMail(ev) {
        ev.preventDefault();
        let newLiElement;

        if (!inpRecip.value || !inpTitle.value || !textArea.value) {
            return;
        }
        newLiElement = liFactory(
            inpTitle.value,
            inpRecip.value,
            textArea.value
        );
        ulListMails.appendChild(newLiElement);
        inpRecip.value = '';
        inpTitle.value = '';
        textArea.value = '';
    }

    function liFactory(title, recipName, text) {
        let newLi = document.createElement('li');
        let newh41 = document.createElement('h4');
        let newh42 = document.createElement('h4');

        let newSpan = document.createElement('span');
        let newDiv = document.createElement('div');
        let newSendBtn = document.createElement('button');
        let newDeleteBtn = document.createElement('button');

        newh41.textContent = 'Title: ' + title;
        newLi.appendChild(newh41);
        newh42.textContent = 'Recipient Name: ' + recipName;
        newLi.appendChild(newh42);
        newSpan.textContent = text;
        newLi.appendChild(newSpan);
        newDiv.id = 'list-action';
        newLi.appendChild(newDiv);
        newSendBtn.id = 'send';
        newSendBtn.type = 'submit';
        newSendBtn.textContent = 'Send';
        newDiv.appendChild(newSendBtn);
        newDeleteBtn.id = 'delete';
        newDeleteBtn.type = 'submit';
        newDeleteBtn.textContent = 'Delete';
        newDiv.appendChild(newDeleteBtn);

        let newLi2 = document.createElement('li');
        let span1 = document.createElement('span');
        let span2 = document.createElement('span');
        span1.textContent = 'To: ' + recipName;
        span2.textContent = 'Title: ' + title;
        let newDivSent = document.createElement('div');
        newDivSent.className = 'btn';
        let newDeleteBtnSent = document.createElement('button');
        newDeleteBtnSent.textContent = 'Delete';
        newDeleteBtnSent.className = 'delete';
        newDeleteBtnSent.type = 'submit';
        newDivSent.appendChild(newDeleteBtnSent);
        newLi2.appendChild(span1);
        newLi2.appendChild(span2);

        newSendBtn.addEventListener('click', function (ev) {
            ev.preventDefault();
            newLi2.appendChild(newDivSent);
            ulSentList.appendChild(newLi2);
            ulListMails.removeChild(newLi);
        });

        newDeleteBtn.addEventListener('click', function (ev) {
            ev.preventDefault();

            ulDeleteList.appendChild(newLi2);

            ulListMails.removeChild(newLi);
        });

        newDeleteBtnSent.addEventListener('click', function (ev) {
            ev.preventDefault();

            ulDeleteList.appendChild(newLi2);
            newLi2.removeChild(newDivSent);
        });

        return newLi;
    }
}