function solve() {
  const firstNameEl = document.getElementById("first-name");
  const lastNameEl = document.getElementById("last-name");
  const ageEl = document.getElementById("age");
  const genderEl = document.getElementById("genderSelect");
  const dishDescriptionEl = document.getElementById("task");
  const submitBtn = document.getElementById("form-btn");
  const inProgressUl = document.getElementById("in-progress");
  const finishedUl = document.getElementById("finished");
  const clearBtn = document.getElementById("clear-btn");
  const progressCount = document.getElementById("progress-count");

  submitBtn.addEventListener("click", submitDish);

  function submitDish(e) {
    e.preventDefault;

    const firstName = firstNameEl.value;
    const lastName = lastNameEl.value;
    const age = ageEl.value;
    const gender = genderEl.value;
    const dishDescription = dishDescriptionEl.value;

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

    //create elements;
    const listElement = document.createElement('li');
    const articleElement = document.createElement('article');
    const h4Element = document.createElement('h4');
    const genderAgeElement = document.createElement('p');
    const descriptionElement = document.createElement('p');
    const editBtn = document.createElement('button');
    const completeBtn = document.createElement('button');

    //add classes;
    listElement.classList.add('each-line');
    editBtn.classList.add('edit-btn');
    completeBtn.classList.add('complete-btn');

    //add event listeners;
    editBtn.addEventListener("click", editInfo);
    completeBtn.addEventListener("click", completeDish);

    //add text content;
    h4Element.textContent = `${firstName} ${lastName}`;
    genderAgeElement.textContent = `${gender}, ${age}`;
    descriptionElement.textContent = `Dish description: ${dishDescription}`;
    editBtn.textContent = 'Edit';
    completeBtn.textContent = 'Mark as complete';

    //append children;
    inProgressUl.appendChild(listElement);
    listElement.appendChild(articleElement);
    listElement.appendChild(editBtn);
    listElement.appendChild(completeBtn);
    articleElement.appendChild(h4Element);
    articleElement.appendChild(genderAgeElement);
    articleElement.appendChild(descriptionElement);

    //clear input fields;
    firstNameEl.value = '';
    lastNameEl.value = '';
    ageEl.value = '';
    dishDescriptionEl.value = '';

    //increace counter;
    progressCount.textContent = Number(progressCount.textContent) + 1;

    function editInfo() {
      firstNameEl.value = firstName;
      lastNameEl.value = lastName
      ageEl.value = age;
      genderEl.value = gender;
      dishDescriptionEl.value = dishDescription;

      listElement.remove();
      progressCount.textContent = Number(progressCount.textContent) - 1;
    }

    function completeDish() {
      finishedUl.appendChild(listElement);
      editBtn.remove();
      completeBtn.remove();

      progressCount.textContent = Number(progressCount.textContent) - 1;
    }

    clearBtn.addEventListener("click", clear);

    function clear() {
      finishedUl.innerHTML = '';
    }
  }
}