01. Forum posts

function solve() {
  const titleEl = document.querySelector('#post-title');
  const categoryEl = document.querySelector('#post-category');
  const contentEl = document.querySelector('#post-content');
  const reviewList = document.querySelector('#review-list');
  const publishedList = document.querySelector('#published-list');
  const publishBtn = document.querySelector('#publish-btn');
  const clearBtn = document.querySelector('#clear-btn');

  publishBtn.addEventListener('click', publishPost);

  function publishPost(e) {
    e.preventDefault();

    const title = titleEl.value;
    const category = categoryEl.value;
    const content = contentEl.value;

    if (!title || !category || !content) {
      return;
    }

    clearInputFields();
    createPostListElement(title, category, content);
    const editBtns = Array.from(document.querySelectorAll('.edit'));
    editBtns.forEach(button => button.addEventListener('click', editInfo));
    const approveBtns = Array.from(document.querySelectorAll('.approve'));
    approveBtns.forEach(button => button.addEventListener('click', approvePost));
    clearBtn.addEventListener('click', clearPosts);
  }

  function clearInputFields() {
    titleEl.value = '';
    categoryEl.value = '';
    contentEl.value = '';
  }

  function createPostListElement(title, category, content) {
    const listElement = document.createElement('li');
    listElement.classList.add('rpost');
    listElement.innerHTML = `
    <article>
    <h4>${title}</h4>
    <p>Category: ${category}</p>
    <p>Content: ${content}</p>
    </article>
    <button class="action-btn edit">Edit</button>
    <button class="action-btn approve">Approve</button>
    `
    reviewList.appendChild(listElement);
  }

  function editInfo(e) {
    const listElRef = e.target.parentElement;
    const data = listElRef.children[0].children;
    titleEl.value = data[0].textContent
    categoryEl.value = data[1].textContent.split(': ')[1];
    contentEl.value = data[2].textContent.split(': ')[1];
    listElRef.remove();
  }

  function approvePost(e) {
    const listElRef = e.target.parentElement;
    listElRef.children[1].remove()
    listElRef.children[1].remove()
    publishedList.appendChild(listElRef);
  }

  function clearPosts(e) {
    const elementsToDelete = Array.from(publishedList.children);
    for (const el of elementsToDelete) {
      el.remove();
    }
  }
}