main.js

const inputNums = document.getElementById("numCatsFacts");
const inputNumPhotos = document.getElementById("numCatsphotos");
const submitFactsBtn = document.querySelector(".submit-btn");
const photosBtn = document.getElementById("photos-btn");
const catsPhotos = document.querySelector(".photos");
const appResult = document.getElementById("app-result");

async function getFacts(number) {
  const response = await axios.get(
    `https://meowfacts.herokuapp.com/?count=${number}`
  );
  return response.data;
}

async function getPhotos(number) {
  const response = await axios.get(
    `https://api.thecatapi.com/v1/images/search?limit=${number}`
  );
  return response.data;
}

submitFactsBtn.addEventListener("click", async () => {
  let number = inputNums.value;
  if (number === "") {
    appResult.innerHTML = "<h3>Tap an input</h3> ";
    return;
  }
  submitFactsBtn.setAttribute("disabled", true);

  try {
    const { data } = await getFacts(number);
    const list = document.createElement("ul");
    list.classList.add("result-list");

    data.forEach((fact) => {
      const listItem = document.createElement("li");
      listItem.innerText = fact;
      list.appendChild(listItem);
    });

    appResult.innerHTML = "";
    appResult.appendChild(list);
  } catch (error) {
    appResult.innerHTML = "<h3>something went wrong try again <h3>";
  } finally {
    submitFactsBtn.removeAttribute("disabled");
  }
});

photosBtn.addEventListener("click", async () => {
  let number = inputNumPhotos.value;

  if (number === "") {
    appResult.innerHTML = "<h3>Tap an input</h3> ";
    return;
  }
  photosBtn.setAttribute("disabled", true);

  try {
    const images = await getPhotos(number);
    const div = document.createElement("div");
    div.classList.add("result-images");

    images.forEach((item) => {
      const container = document.createElement("div");
      container.classList.add("result-images-container");

      const image = document.createElement("img");
      image.setAttribute("src", item.url);

      container.appendChild(image);
      div.appendChild(container);
    });
    appResult.innerHTML = "";
    appResult.appendChild(div);
  } catch (error) {
    appResult.innerHTML = "<h3>something went wrong try again <h3>";
  } finally {
    photosBtn.removeAttribute("disabled");
  }
});