softBlog

function solve() {
    let [creator, title, category, content] = document.querySelectorAll(
        'form input, textarea'
    );
    let mainSection = document.querySelector('main section');
    let olArchive = document.querySelector('section.archive-section ol');

    console.log(mainSection);
    let btnCreate = document.getElementsByClassName('btn create')[0];

    btnCreate.addEventListener('click', function (e) {
        e.preventDefault();
        let newArticle = document.createElement('article');
        newArticle.innerHTML = `
      <h1>${title.value}</h1>
      <p>Category:<strong>${category.value}</strong></p>
      <p>Creator:<strong>${creator.value}</strong></p>
      <p>${content.value}</p>

      <div class="buttons">
      <button class="btn delete">Delete</button>
      <button class="btn archive">Archive</button>
      </div>`;
        let [btnDel, btnArch] = newArticle.querySelectorAll('button');

        mainSection.appendChild(newArticle);
        let currentTitle = title.value;

        [creator, title, category, content].forEach((el) => (el.value = ''));

        btnDel.addEventListener('click', (e) => {
            mainSection.removeChild(newArticle);
        });
        btnArch.addEventListener('click', (e) => {
            mainSection.removeChild(newArticle);
            let newLi = document.createElement('li');
            newLi.textContent = currentTitle;
            olArchive.appendChild(newLi);
            Array.from(olArchive.children)
                .sort((a, b) => a.innerText.localeCompare(b.innerText))
                .forEach((li) => olArchive.appendChild(li));
            console.log(olArchive.children);
        });
    });
}