function solve() {


    // HTML elements

    let buttonAdd = document.getElementById('add');

    let buttonReset = document.getElementById('reset');

    let ulIdList = document.getElementById('list');

    let ulClSentList = document.querySelector('.sent-list');

    let ulDeleteList = document.querySelector('.delete-list');

    console.log(ulDeleteList);

    // Functionality

    // <!-- <li>
    //    <h4>Title: For Work</h4>
    //     <h4>Recipient Name: John@abv.bg</h4>
    //      <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem ut recusandae deserunt, debitis perspiciatis praesentium facilis, suscipit adipisci provident, tempora repellat ratione voluptate sit vel animi totam. Quia, qui enim.</span>
    //       <div id="list-action">
    //        <button type="submit" id="send">Send</button>
    //         <button type="submit" id="delete">Delete</button>
    //       </div>
    //   </li> -->

    buttonAdd.addEventListener('click', (e) => {

        let inputFields = document.querySelectorAll('input');

        inputFields = Array.from(inputFields);

        let textarea = document.getElementById('message');

        let arrOfFields = inputFields.map(el => el.value);

        arrOfFields.push(textarea.value);

        if (!arrOfFields.includes('')) {

            let liElement = document.createElement('li');

            let h4Element1 = document.createElement('h4');

            let h4Element2 = document.createElement('h4');

            let spanElement = document.createElement('span');

            let divElement = document.createElement('div');

            let buttonSend = document.createElement('button');

            let buttonDelete = document.createElement('button');

            buttonSend.type = 'submit';

            buttonDelete.type = 'submit';

            buttonSend.id = 'send';

            buttonDelete.id = 'delete';

            buttonSend.textContent = 'Send';

            buttonDelete.textContent = 'Delete';

            divElement.id = 'list-action';

            h4Element1.textContent = `Title: ${arrOfFields[1]}`;

            h4Element2.textContent = `Recipient Name: ${arrOfFields[0]}`;

            spanElement.textContent = arrOfFields[2];

            divElement.appendChild(buttonSend);

            divElement.appendChild(buttonDelete);

            liElement.appendChild(h4Element1);

            liElement.appendChild(h4Element2);

            liElement.appendChild(spanElement);

            liElement.appendChild(divElement);

            ulIdList.appendChild(liElement);

            inputFields.forEach(el => el.value = '');

            textarea.value = '';

            buttonDelete.addEventListener('click', (e) => {

                let liElement3 = document.createElement('li');

                let spanElement3 = document.createElement('span');

                let spanElement4 = document.createElement('span');

                spanElement3.textContent = `To: ${arrOfFields[0]}`;

                spanElement4.textContent = `Title: ${arrOfFields[1]}`;

                liElement3.appendChild(spanElement3);

                liElement3.appendChild(spanElement4);

                ulDeleteList.appendChild(liElement3);

                ulIdList.textContent = '';

            })

            let sentButtonInli = document.getElementById('send');


            sentButtonInli.addEventListener('click', (e) => {

                let liElement2 = document.createElement('li');

                let spanElement2 = document.createElement('span');

                let spanElement21 = document.createElement('span');

                let divElement2 = document.createElement('div');

                let buttonDelete2 = document.createElement('button');

                buttonDelete2.type = 'submit';

                buttonDelete2.classList.add('delete');

                buttonDelete2.textContent = 'Delete';

                spanElement2.textContent = `To: ${arrOfFields[0]}`;

                spanElement21.textContent = `Title: ${arrOfFields[1]}`;

                divElement2.classList.add('btn');

                divElement2.appendChild(buttonDelete2);

                liElement2.appendChild(spanElement2);

                liElement2.appendChild(spanElement21);

                liElement2.appendChild(divElement2);

                ulClSentList.appendChild(liElement2);

                ulIdList.textContent = '';

                //     <!-- <li>
                //     <span>To: John@abv.bg</span>
                //     <span>Title: For Work</span>
                // </li> -->

                buttonDelete2.addEventListener('click', (e) => {

                    let liElement3 = document.createElement('li');

                    let spanElement3 = document.createElement('span');

                    let spanElement4 = document.createElement('span');

                    spanElement3.textContent = `To: ${arrOfFields[0]}`;

                    spanElement4.textContent = `Title: ${arrOfFields[1]}`;

                    liElement3.appendChild(spanElement3);

                    liElement3.appendChild(spanElement4);

                    ulDeleteList.appendChild(liElement3);

                    ulClSentList.textContent = '';

                })

            })

        }

        e.preventDefault();

    })


    buttonReset.addEventListener('click', (e) => {

        let inputFields = document.querySelectorAll('input');

        inputFields = Array.from(inputFields);

        let textarea = document.getElementById('message');

        inputFields.forEach(el => el.value = '');

        textarea.value = '';

        // ulIdList.textContent = '';

        e.preventDefault();

    })


    //     <!-- <li>
    //     <span>To: John@abv.bg</span>
    //     <span>Title: For Work</span>
    //     <div class="btn">
    //         <button type="submit" class="delete">Delete</button>
    //     </div>
    // </li> -->





}


solve()