My Blog

function solve() {

    const creatorInput = document.querySelector('#creator');
    const titleInput = document.querySelector('#title');
    const categoryInput = document.querySelector('#category');
    const contentInput = document.querySelector('#content');

    const createBtn = document.querySelector('.btn.create');
    createBtn.addEventListener('click', addArticle);

    const archiveSection = document.querySelector('.archive-section>ul');

    let arr = [];

    function addArticle(e) {

        e.preventDefault();

        const creator = creatorInput.value;
        const title = titleInput.value;
        const category = categoryInput.value;
        const content = contentInput.value;

      if (creator && title && category && content) {
        let article = document.createElement('article');

        let h1 = document.createElement('h1');

        let firstP = document.createElement('p');
        let secondP = document.createElement('p');
        let thirdP = document.createElement('p');



        let archiveBtn = document.createElement('button');
        let deleteBtn = document.createElement('button');

        let div = document.createElement('div');
        div.classList.add('buttons');

        archiveBtn.textContent = 'Archive';
        deleteBtn.textContent = 'Delete';

        archiveBtn.classList.add('btn');
        archiveBtn.classList.add('archive');

        deleteBtn.classList.add('btn');
        deleteBtn.classList.add('delete');

        deleteBtn.addEventListener('click', deleteArt);
        archiveBtn.addEventListener('click', archiveArt);

        h1.textContent = title;

        firstP.innerHTML = `Category: <strong>${category}</strong>`;

        secondP.innerHTML = `Creator: <strong>${creator}</strong>`;

        thirdP.textContent = content;

        article.appendChild(h1);

        article.appendChild(firstP);

        article.appendChild(secondP);

        article.appendChild(thirdP);

        div.appendChild(deleteBtn);
        div.appendChild(archiveBtn);

        article.appendChild(div);

        document.querySelector("main section").appendChild(article);

        function deleteArt() {
            article.remove();
        }

        function archiveArt() {

          let ul = document.querySelector("ul");

            arr.push(title);

            let sorted = arr.sort((a, b) => a.localeCompare(b));

        while (ul.firstChild) {
            ul.removeChild(ul.firstChild);
            }

       for (const element of sorted) {
        let newLi = document.createElement('li');
        newLi.textContent = element;
        archiveSection.appendChild(newLi);
            }
            article.remove();
        }
      }
    }
  }