myBlog

function solve(){

    let createNewArticle = document.querySelector('form');
    let articleSection = document.querySelector('main section');
    let ul = document.querySelector('.archive-section ul');
    let author = createNewArticle.querySelector("#creator");
    let title = createNewArticle.querySelector('#title');
    let category = createNewArticle.querySelector("#category");
    let content = createNewArticle.querySelector('#content');

    createNewArticle.addEventListener('click', newArticle);
    function newArticle(e){
       e.preventDefault();

       if(e.target.localName === 'button'){
          if(author.value !== '' && title.value !== '' && category.value !== '' && content.value !== ''){
             let article = document.createElement('article');
             let h1 = document.createElement('h1');
             let p = document.createElement('p');
             let p1 = document.createElement('p');
             let p2 = document.createElement('p');
             let div = document.createElement('div');
             let btnDelete = document.createElement('button');
             let btnArchive = document.createElement('button');

             div.className = 'buttons';
             btnDelete.className = 'btn delete';
             btnArchive.className = 'btn archive';
             btnDelete.textContent = 'Delete';
             btnArchive.textContent = 'Archive';
             div.appendChild(btnDelete);
             div.appendChild(btnArchive);

             h1.textContent = title.value;
             p.innerHTML = `Category: <strong>${category.value}</strong>`;
             p1.innerHTML = `Creator: <strong>${author.value}</strong>`;
             p2.textContent = content.value;

             article.appendChild(h1);
             article.appendChild(p);
             article.appendChild(p1);
             article.appendChild(p2);
             article.appendChild(div);

             articleSection.appendChild(article);

            //  author.value = '';
            //  title.value = '';
            //  category.value = '';
            //  content.value = '';

             btnDelete.addEventListener('click', del);
             function del(e){
                e.target.parentElement.parentElement.remove();
             }

             btnArchive.addEventListener('click', archive);
             function archive(e){
                let li = document.createElement('li');
                li.textContent = h1.textContent;
                ul.appendChild(li);
                let list = [...ul.querySelectorAll('li')];

                list.sort((a,b)=> a.textContent.localeCompare(b.textContent)).forEach(i=>{
                    ul.appendChild(i);
                });

                e.target.parentElement.parentElement.remove();
             }

          }
       }

    }

  }