01. Dish Manager - JS Advanced Exam - 22 October 2022

// JS Advanced Retake Exam - 10 Aug 2022
// 01. Dish Manager
// https://judge.softuni.org/Contests/Practice/Index/3565#0

function solve() {
  let formBtn = document.getElementById('form-btn');
  formBtn.addEventListener('click', submitHandler);

  let firstName = document.getElementById('first-name');
  let lastName = document.getElementById('last-name');
  let age = document.getElementById('age');

  let description = document.getElementById('task');
  let ulInProgress = document.getElementById('in-progress');
  let ulFinished = document.getElementById('finished');
  let inProgress = document.getElementById('progress-count');
  let progressCounter = 0;
  let clearBtn = document.getElementById('clear-btn');

  function submitHandler() {
    if (firstName.value == '' ||
      lastName.value == '' ||
      age.value == '' ||
      description.value == '') {
      console.log('fail')
      return;
    }
    let gender = document.getElementById('genderSelect');
    let genderOption = gender.options[gender.selectedIndex].text;

    let savedData = {
      firstName: firstName.value,
      lastName: lastName.value,
      age: age.value,
      gender: gender.options[gender.selectedIndex].text,
      description: description.value,
    }

    let newLi = document.createElement('li');
    newLi.setAttribute('class', 'each-line');
    newLi.innerHTML = `
    <article>
    <h4>${firstName.value} ${lastName.value}</h4>
    <p>${savedData['gender']}, ${age.value}</p>
    <p>Dish description: ${description.value}</p>
    </article>
    <button class="edit-btn">Edit</button>
    <button class="complete-btn">Mark as complete</button>
    `
    ulInProgress.appendChild(newLi);
    firstName.value = '';
    lastName.value = '';
    age.value = '';
    description.value = '';
    progressCounter++;
    inProgress.textContent = progressCounter;
    let editBtn = document.querySelector('#in-progress > li > button.edit-btn');
    let completeBtn = document.querySelector('.complete-btn');

    editBtn.addEventListener('click', editHandler);
    completeBtn.addEventListener('click', completeHandler);

    function editHandler(e) {
      console.log(e.target)
      firstName.value = savedData['firstName'];
      lastName.value = savedData['lastName'];
      age.value = savedData['age'];
      gender.value = savedData['gender'];
      description.value = savedData['description'];
      progressCounter--;
      inProgress.textContent = progressCounter;
      newLi.remove();

    }
    function completeHandler(e) {
      ulFinished.appendChild(newLi)
      editBtn.remove();
      completeBtn.remove();
      progressCounter--;
      inProgress.textContent = progressCounter;

    }
    clearBtn.addEventListener('click', clearHander);
    function clearHander(e) {
      ulFinished.remove();

    }
  }
}