01. SoftBlog

function solve() {
   console.log('hellothere!');
   let creatorInput = document.getElementById("creator");
   let titleInput = document.getElementById("title");
   let categoryInput = document.getElementById("category");
   let contentTextarea = document.getElementById("content");
   let postsSection = Array.from(document.getElementsByTagName("section"))[1];
   let archSection = Array.from(document.getElementsByClassName("archive-section"))[0];
   let ol=  document.querySelector("ol");
   console.log(ol)
   console.log(postsSection);
   console.log(archSection);

   let createBtn = Array.from(document.getElementsByClassName('btn create'))[0];
   console.log(creatorInput, titleInput, categoryInput, contentTextarea, createBtn);

   createBtn.addEventListener("click", createArticle);

   function createArticle(e) {
      e.preventDefault();
      console.log('create clicked');
      let creator = creatorInput.value;
      let title = titleInput.value;
      let category = categoryInput.value;
      let content = contentTextarea.value;

      let artObj={creator,title,category,content}
      console.log(creator, title, category, content);

      let newArt = document.createElement("article");
      let titleH = document.createElement("h1");
      titleH.textContent = title;

      let categoryP = document.createElement("p");
      categoryP.textContent = "Category: ";
      let strCategory = document.createElement("strong");
      strCategory.textContent = category;
      categoryP.appendChild(strCategory);

      let creatorP = document.createElement("p");
      creatorP.textContent = "Creator: ";
      let strCreator = document.createElement("strong");
      strCreator.textContent = creator;
      creatorP.appendChild(strCreator);

      let contentP = document.createElement("p");
      contentP.textContent = content;

      let buttonsDiv = document.createElement("div");
      buttonsDiv.className = "buttons";
      let delBtn = document.createElement("button");
      delBtn.classList.add("btn");
      delBtn.classList.add("delete");
      delBtn.textContent = "Delete";
      delBtn.addEventListener("click", () => {
         delThis(newArt)
      });


      let archBtn = document.createElement("button");
      archBtn.classList.add("btn");
      archBtn.classList.add("archive");
      archBtn.textContent = "Archive";
      archBtn.addEventListener("click", () => {
         archThis(newArt,artObj)
      });

      buttonsDiv.appendChild(delBtn);
      buttonsDiv.appendChild(archBtn);

      newArt.appendChild(titleH);
      newArt.appendChild(categoryP);
      newArt.appendChild(creatorP);
      newArt.appendChild(contentP);
      newArt.appendChild(buttonsDiv);
      postsSection.appendChild(newArt);



   }

   function delThis(art) {
      art.remove()
   }

   function archThis(art,obj) {
      console.log(art);
      console.log(obj);
      let archLi=document.createElement("li");
      archLi.textContent=obj.title;
      ol.appendChild(archLi);
      sortArts();
      art.remove()
   }

   function sortArts(){
      let lis=Array.from(ol.querySelectorAll("li"));
      lis.sort((a,b)=>a.textContent.localeCompare(b.textContent));
      lis.forEach(l=>{
         ol.appendChild(l)
      })
   }
}