02

window.addEventListener("load", solve);

function solve() {
      const bloodTypeInputEl = document.getElementById("type");
      const ageInputEl = document.getElementById("age");
      const genderInputEl = document.getElementById("gender");

      const registerBtnEl = document.getElementById("register-btn");

      const registeredListEl = document.getElementById("registered-list");
      const confirmedListEl = document.getElementById("confirmed-list");

      registerBtnEl.addEventListener("click", handleOnRegister);

      const clearBtnEl = document.createElement("button");
      clearBtnEl.className = "clear-btn";
      clearBtnEl.textContent = "clear";
      clearBtnEl.type = "button";

      confirmedListEl.after(clearBtnEl);

      clearBtnEl.addEventListener("click", () => {
       confirmedListEl.innerHTML = "";

      });

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

      const blood =  bloodTypeInputEl.value.trim();
      const age = ageInputEl.value.trim();
      const gender = genderInputEl.value.trim();

      if (!blood || !age || !gender) {
            return;
        }

      const li = document.createElement("li");

      const article = document.createElement("article");

      const pBlood = document.createElement("p");
      pBlood.textContent = `Blood Type: ${blood}`;

      const pAge = document.createElement("p");
      pAge.textContent = `Age: ${age}`;

      const pGender = document.createElement("p");
      pGender.textContent = `Gender: ${gender}`;

      article.appendChild(pBlood);
      article.appendChild(pAge);
      article.appendChild(pGender);

      li.appendChild(article);

      const editBtnEl = document.createElement("button");
        editBtnEl.textContent = "Edit";
        editBtnEl.addEventListener("click", () => {
            bloodTypeInputEl.value = blood;
            ageInputEl.value = age;
            genderInputEl.value = gender;
            li.remove();
        });

        const confirmedBtnEl = document.createElement("button");
        confirmedBtnEl.textContent = "Confirm";
        confirmedBtnEl.addEventListener("click", () => {
            confirmedListEl.appendChild(li);
            editBtnEl.remove();
            confirmedBtnEl.remove();
        });

        li.appendChild(editBtnEl);
        li.appendChild(confirmedBtnEl);

        registeredListEl.appendChild(li);

        bloodTypeInputEl.value = "";
        ageInputEl.value = "";
        genderInputEl.value = "";
    }
}