function solve() {
    const recipientNameElement=document.getElementById('recipientName');
    const titleELement=document.getElementById('title');
    const messageElement=document.getElementById('message');
    const addButtonElemnet=document.getElementById('add');
    const resetButtonElemnet=document.getElementById('reset');
    const listElmement=document.getElementById('list');
    const sendListElemnet=document.querySelector('.sent-list');
    const deletedListElement=document.querySelector('.delete-list')

    addButtonElemnet.addEventListener('click', (e)=>{
        e.preventDefault();

        let name= recipientNameElement.value;
        let title=titleELement.value;
        let message=messageElement.value;

        recipientNameElement.value='';
        titleELement.value='';
        messageElement.value='';



        let listEmail=document.createElement('li');
        let titleForEmail=document.createElement('h4');
            listEmail.textContent='Title: ' + title;
        let nameForEmail=document.createElement('h4');
            titleForEmail.textContent='Recipient Name: '+ name;
        let messageForEmail=document.createElement('span');
            messageForEmail.textContent=message;
        let listActionElement=document.createElement('div');
            listActionElement.setAttribute('id', 'list-action');

        let sendButton=document.createElement('button');
            sendButton.setAttribute('type', 'submit');
            sendButton.setAttribute('id','send');
            sendButton.textContent='Send'
        sendButton.addEventListener('click', (e)=>{
            e.preventDefault();

            let sentMailsList=document.createElement('li');
            let sentMailTo=document.createElement('span');
                sentMailTo.textContent=`To: ${name}`;
            let sentMailTitle=document.createElement('span');
                sentMailTitle.textContent=`Title: ${title}`;
            let sentMailButtonDiv=document.createElement('div');
                sentMailButtonDiv.setAttribute('class', 'btn');
            let sentMailDeleteButton=document.createElement('button');
                sentMailDeleteButton.setAttribute('type','submit');
                sentMailDeleteButton.setAttribute('class', 'delete');
                sentMailDeleteButton.textContent='Delete';

                sentMailDeleteButton.addEventListener('click', (e)=>{                sentMailDeleteButton.addEventListener('click', (e)=>{
                    e.preventDefault();

                    let deletedEmailsList=document.createElement('li');
                    let deletedEmailTo=document.createElement('span');
                        deletedEmailTo.textContent=name;
                    let deletedEmailTitle=document.createElement('span');
                        deletedEmailTitle.textContent=title;

                    deletedEmailsList.appendChild(deletedEmailTo);
                    deletedEmailsList.appendChild(deletedEmailTitle);

                    deletedListElement.appendChild(deletedEmailsList);

                    sentMailsList.remove();

                })})


            sentMailButtonDiv.appendChild(sentMailDeleteButton);

            sentMailsList.appendChild(sentMailTo);
            sentMailsList.appendChild(sentMailTitle);
            sentMailsList.appendChild(sentMailButtonDiv);

            sendListElemnet.appendChild(sentMailsList);

            listEmail.remove();

        })

        let deleteButton=document.createElement('button');
            deleteButton.setAttribute('type', 'submit');
            deleteButton.setAttribute('id','delete');
            deleteButton.textContent='Delete'
        deleteButton.addEventListener('click',(e)=>{
            e.preventDefault();

            let deletedEmailsList=document.createElement('li');
            let deletedEmailTo=document.createElement('span');
                deletedEmailTo.textContent=name;
            let deletedEmailTitle=document.createElement('span');
                deletedEmailTitle.textContent=title;

            deletedEmailsList.appendChild(deletedEmailTo);
            deletedEmailsList.appendChild(deletedEmailTitle);

            deletedListElement.appendChild(deletedEmailsList);

            listEmail.remove();
        })


        listActionElement.appendChild(sendButton);
        listActionElement.appendChild(deleteButton);

        listEmail.appendChild(titleForEmail);
        listEmail.appendChild(nameForEmail);
        listEmail.appendChild(messageForEmail);
        listEmail.appendChild(listActionElement);

        listElmement.appendChild(listEmail);





    })
    resetButtonElemnet.addEventListener('click', (e)=>{
        e.preventDefault();

        recipientNameElement.value=' ';
        titleELement.value=' ';
        messageElement.value=' ';
    })
}
solve()