JS-Advanced Exams: Task Manager

function solve() {
  const [taskInput, dateInput] = Array.from(document.querySelectorAll("input"));
  const descriptionInput = document.querySelector("textarea");
  const [openSection, inProgressSection, completeSection] = Array.from(
    document.querySelectorAll("section")
  )
    .slice(1)
    .map((el) => el.children[1]);

  function addTask(e) {
    e.preventDefault();
    if (isEmpty(taskInput, descriptionInput, dateInput)) return;
    addOpenTask(taskInput, descriptionInput, dateInput, openSection);
  }

  function addOpenTask(taskInput, descriptionInput, dateInput, element) {
    const article = createElement("article");
    const task = createElement("h3", taskInput.value);
    const description = createElement(
      "p",
      `Description: ${descriptionInput.value}`
    );
    const date = createElement("p", `Due Date: ${dateInput.value}`);
    const buttonsContainer = createElement("div", "", "flex");
    const startBtn = createElement("button", "Start", "green");
    const deleteBtn = createElement("button", "Delete", "red");

    startBtn.addEventListener("click", moveArticle);
    deleteBtn.addEventListener("click", deleteArticle);

    buttonsContainer.append(startBtn, deleteBtn);
    article.append(task, description, date, buttonsContainer);

    element.appendChild(article);
  }

  function moveArticle(e) {
    const article = e.target.parentElement.parentElement;
    const buttonsContainer = document.querySelector(".flex");
    buttonsContainer.innerHTML = "";

    const deleteBtn = createElement("button", "Delete", "red");
    const finishBtn = createElement("button", "Finish", "orange");

    deleteBtn.addEventListener("click", deleteArticle);
    finishBtn.addEventListener("click", finishArticle);

    buttonsContainer.append(deleteBtn, finishBtn);
    openSection.removeChild(article);
    inProgressSection.appendChild(article);
  }

  function finishArticle(e) {
    const article = e.target.parentElement.parentElement;
    e.target.parentElement.remove();

    completeSection.appendChild(article);
  }

  function deleteArticle(e) {
    e.target.parentElement.parentElement.remove();
  }

  function createElement(tag, content, className) {
    const el = document.createElement(tag);

    if (content) {
      el.textContent = content;
    }

    if (className) {
      el.classList.add(className);
    }

    return el;
  }

  function isEmpty(taskInput, descriptionInput, dateInput) {
    return (
      taskInput.value === "" ||
      descriptionInput.value === "" ||
      dateInput.value === ""
    );
  }

  document.getElementById("add").addEventListener("click", addTask);
}