01. Pet Me

function solve() {
  document.querySelector("button").addEventListener("click", petMe);
  class Pet {
    constructor(name, age, kind, currentOwner) {
      this.Name = name;
      this.Age = age;
      this.Kind = kind;
      this.CurrentOwner = currentOwner;
    }
  }
  function petMe(e) {
    e.preventDefault();
    let name = document.querySelector('[placeholder="Name"]');
    let age = document.querySelector('[placeholder="Age"]');
    let kind = document.querySelector('[placeholder="Kind"]');
    let currentOwner = document.querySelector('[placeholder="Current Owner"]');

    if (
      name.value != "" &&
      age.value != "" &&
      parseFloat(age.value) &&
      kind.value != "" &&
      currentOwner.value != ""
    ) {
      let adoptionElement = document.getElementById("adoption");
      let listElement = adoptionElement.querySelector("ul");
      let currentPet = new Pet(
        name.value.trim(),
        parseFloat(age.value),
        kind.value.trim(),
        currentOwner.value.trim()
      );
      let newPetElement = document.createElement("li");
      newPetElement.innerHTML = `<p><strong>${currentPet.Name}</strong> is a <strong>${currentPet.Age}</strong> year old <strong>${currentPet.Kind}</strong></p><span>Owner: ${currentPet.CurrentOwner}</span><button id="contact">Contact with owner</button>`;
      newPetElement.querySelector("button").addEventListener("click", contact);
      listElement.appendChild(newPetElement);
      name.value = "";
      age.value = "";
      kind.value = "";
      currentOwner.value = "";
    }
  }
  function contact(eventForContactButton) {
    let liElementParent = eventForContactButton.target.parentNode;
    eventForContactButton.target.remove();
    liElementParent.innerHTML +=
      '<div><input placeholder="Enter your names"><button id="buttonId">Yes! I take it!</button></div>';
    let button = liElementParent.querySelector("button");
    button.addEventListener("click", adopted);
  }
  function adopted(eventForAdoptionButton) {
    let liDivElementParent = eventForAdoptionButton.target.parentNode;
    let liElementParent = liDivElementParent.parentNode;
    let input = liElementParent.querySelector(
      '[placeholder="Enter your names"]'
    );
    if (input.value) {
      let adoptionElement = document.getElementById("adopted");
      let listElement = adoptionElement.querySelector("ul");
      let paragraphElement = liElementParent.querySelector("p");
      let createNewAdoptedPet = document.createElement("li");
      createNewAdoptedPet.appendChild(paragraphElement);
      createNewAdoptedPet.innerHTML += `<span>New Owner: ${input.value}</span><button>Checked</button>`;
      let button = createNewAdoptedPet.querySelector("button");

      button.addEventListener("click", deleteFunction);
      listElement.appendChild(createNewAdoptedPet);
      liElementParent.remove();
    }
  }
  function deleteFunction(e) {
    let liElementParent = e.target.parentNode;
    liElementParent.remove();
  }
}