01. Pet Me JS Advanced Exam - 27 June 2020

function petMe() {
  const dataField = document.querySelectorAll('input[type="text"]');

  const [nameField, ageField, kindField, currentOwnerField] = dataField;


  const removePet = (e) => {
    e.target.parentNode.remove();
  };

  const movePet = (e) => {
    const getDiv = e.target.parentNode;

    const box = e.target.parentNode.parentNode;

    const inputField = getDiv.getElementsByTagName('input')[0];

    if (inputField.value === '') {
      return;
    }

    const getList = document.querySelector('#adopted ul');

    const owner = box.getElementsByTagName('span')[0];
    owner.textContent = `New Owner: ${inputField.value}`;

    const newBtn = document.createElement('button');
    newBtn.textContent = 'Checked';
    box.appendChild(newBtn);

    newBtn.addEventListener('click', removePet);

    e.target.parentNode.remove();

    getList.appendChild(box);
  };

  const changeButton = (e) => {
    const box = e.target.parentNode;
    box.getElementsByTagName('button')[0].remove();

    const createDiv = document.createElement('div');

    const createInput = document.createElement('input');
    createInput.setAttribute('placeholder', 'Enter your names');

    const newButton = document.createElement('button');
    newButton.textContent = 'Yes! I take it!';

    newButton.addEventListener('click', movePet);

    createDiv.appendChild(createInput);
    createDiv.appendChild(newButton);

    box.appendChild(createDiv);
  };

  const findNewFriend = (e) => {
    e.preventDefault();

    if (nameField.value === '' || ageField.value === '' || kindField.value === '' || currentOwnerField.value === '') {
      return;
    }
    if (Number.isNaN(Number(ageField.value))) {
      return;
    }

    const getSection = document.getElementById('adoption');
    const getList = getSection.getElementsByTagName('ul')[0];


    const createListItem = document.createElement('li');
    const createParagraph = document.createElement('p');

    const createFirstStrong = document.createElement('strong');
    createFirstStrong.textContent = nameField.value;
    createParagraph.appendChild(createFirstStrong);

    createParagraph.innerHTML += ' is a ';

    const createSecondStrong = document.createElement('strong');
    createSecondStrong.textContent = ageField.value;
    createParagraph.appendChild(createSecondStrong);

    createParagraph.innerHTML += ' year old ';


    const createThirdStrong = document.createElement('strong');
    createThirdStrong.textContent = kindField.value;
    createParagraph.appendChild(createThirdStrong);

    createListItem.appendChild(createParagraph);

    getList.appendChild(createListItem);
    createListItem.appendChild(createParagraph);

    const createSpan = document.createElement('span');
    createSpan.textContent = `Owner: ${currentOwnerField.value}`;
    createListItem.appendChild(createSpan);


    const createButton = document.createElement('button');
    createButton.textContent = 'Contact with owner';
    createListItem.appendChild(createButton);

    createButton.addEventListener('click', changeButton);


    nameField.value = '';
    ageField.value = '';
    kindField.value = '';
    currentOwnerField.value = '';
  };


  const button = document.getElementsByTagName('button')[0];
  button.addEventListener('click', findNewFriend);
}