01

function solve() {

   let author = document.getElementById("creator");
   let title = document.getElementById("title");
   let category = document.getElementById("category");
   let content = document.getElementById("content");

   let btnCreate = document.getElementsByClassName("create")[0];
   let posts = document.querySelector('main section');

   btnCreate.addEventListener('click', (e) => {
      e.preventDefault();
      let article = createElement('article');
      let h1 = createElement('h1', title.value)

      let pCategory = createElement('p', 'Category:');
      let strongCat = createElement('strong', category.value);
      pCategory.appendChild(strongCat);

      let pAuth = createElement('p', 'Creator:');
      let strongAuth = createElement('strong', author.value);
      pAuth.appendChild(strongAuth);

      let pContent = createElement('p', content.value);

      let div = createElement('div');
      div.setAttribute('class', 'buttons');
      let btnDelete = createElement('button', 'Delete'); //
      btnDelete.setAttribute('class', 'btn delete');
      let btnArchive = createElement('button', 'Archive'); //
      btnArchive.setAttribute('class', 'btn archive');
      div.appendChild(btnDelete);
      div.appendChild(btnArchive);

      article.appendChild(h1);
      article.appendChild(pCategory);
      article.appendChild(pAuth);
      article.appendChild(pContent);
      article.appendChild(div);
      posts.appendChild(article);

      btnDelete.addEventListener('click', ()=> {
         article.remove();
      })

      btnArchive.addEventListener('click', ()=> {
         let ol = document.querySelector('.archive-section').children[1];
         let li = createElement('li', article.children[0].textContent);
         ol.appendChild(li);
         Array.from(ol.children)
         .sort((a, b) => (a.textContent).localeCompare(b.textContent))
         .forEach(li => ol.appendChild(li));

         article.remove();
      })

   })

   function createElement(type, text, attributes = []) {
      let element = document.createElement(type);
      if (text) {
          element.textContent = text;
      }
      attributes
          .map(attr => attr.split('='))
          .forEach(([ name, value ]) => {
              element.setAttribute(name, value);
          })
      return element;
  }
}