01. Dish Manager

function solve() {
  const firstNameEl = document.querySelector('#first-name');
  const lastNameEl = document.querySelector('#last-name');
  const ageEl = document.querySelector('#age');
  const genderEl = document.querySelector('#genderSelect');
  const dishInfoEl = document.querySelector('#task');
  const inProgressUl = document.querySelector('#in-progress');
  const counterEl = document.querySelector('#progress-count');
  const finishedEl = document.querySelector('#finished')
  const clearBtn = document.querySelector('#clear-btn');
  const submitBtn = document.querySelector('#form-btn');

  submitBtn.addEventListener('click', submitData);

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

    const firstName = firstNameEl.value;
    const lastName = lastNameEl.value;
    const age = ageEl.value;
    const gender = genderEl.value;
    const dishInfo = dishInfoEl.value;

    if (!firstName || !lastName || !age || !dishInfo) {
      return;
    }

    clearInputFields();
    increaseCounter();
    createListElement(firstName, lastName, age, gender, dishInfo);

    const editBtns = Array.from(document.querySelectorAll('.edit-btn'));
    editBtns.forEach(button => button.addEventListener('click', editInfo));

    const completeBtns = Array.from(document.querySelectorAll('.complete-btn'));
    completeBtns.forEach(button => button.addEventListener('click', completeDish));

    clearBtn.addEventListener('click', clearFinishedList);
  }

  function increaseCounter() {
    const currentValue = Number(counterEl.textContent);
    counterEl.textContent = currentValue + 1;
  }

  function clearInputFields() {
    firstNameEl.value = '';
    lastNameEl.value = '';
    ageEl.value = '';
    genderEl.value = '';
    dishInfoEl.value = '';
  }
  function createListElement(firstName, lastName, age, gender, dishInfo){
    const listElement = document.createElement('li');
    listElement.classList.add('each-line');

    listElement.innerHTML = `<article>
      <h4>${firstName} ${lastName}</h4>
      <p>${gender}, ${age}</p>
      <p>Dish description: ${dishInfo}</p>
      </article>
      <button class="edit-btn">Edit</button>
      <button class="complete-btn">Mark as complete</button>`

    inProgressUl.appendChild(listElement);
  }

  function editInfo(e) {
    const listElementRef = e.target.parentElement;
    const articleRef = e.target.parentElement.children[0].children;
    const articleArr = Array.from(articleRef);

    firstNameEl.value = articleArr[0].textContent.split(' ')[0];
    lastNameEl.value = articleArr[0].textContent.split(' ')[1];
    ageEl.value = articleArr[1].textContent.split(', ')[1];
    genderEl.value = articleArr[1].textContent.split(', ')[0];
    dishInfoEl.value = articleArr[2].textContent.split(': ')[1];

    listElementRef.remove();

    reduceCounter();
  }

  function reduceCounter() {
    const currentValue = Number(counterEl.textContent);
    counterEl.textContent = currentValue - 1;
  }

  function completeDish(e) {
    const listElementRef = e.target.parentElement;
    const leftButtonRef = listElementRef.children[1];
    const rightButtonRef = listElementRef.children[2];
    leftButtonRef.remove();
    rightButtonRef.remove();

    finishedEl.appendChild(listElementRef);
    reduceCounter();
  }

  function clearFinishedList() {
    let finishedList = Array.from(finishedEl.children);
    for (const child of finishedList) {
      child.remove();
    }
  }
}