index.js

// input field and button
const searchInputs = document.querySelectorAll(".anime__search");
const searchInputButton = document.querySelector(".nav__search__button");
const animeCardsContainer = document.getElementById("anime__cards");

function searchAnime(value) {
  displayAnimeData(value);
}

searchInputButton.addEventListener("click", function () {
  const userInput = searchInputs[0].value || searchInputs[1].value;
  searchAnime(userInput);
});

searchInputs.forEach((input) => {
  input.addEventListener("keypress", function (event) {
    if (event.key === "Enter") {
      searchAnime(input.value);
    }
  });
});
// input field and button

// function to that collect data from the API
async function getAnimeData(searchTerm) {
  const response = await fetch(
    `https://api.jikan.moe/v4/anime?q=${encodeURIComponent(searchTerm)}&limit=6`,
  );
  const data = await response.json();
  const models = data.data;
  return models;
}

async function displayAnimeData(searchTerm) {
  const animeData = await getAnimeData(searchTerm);
  const animeCardsContainer = document.getElementById("anime__cards");

  const animeHTMLModel = animeData
    .map((anime) => {
      return `<div class="anime__card">
      <img class="anime__img" src="${anime.images.jpg.image_url}" alt="" />
      <h3>${anime.title}</h3>
      <p>Year: ${anime.year ?? "N/A"}</p>
      <p>Rating: ${anime.score ?? "N/A"}/10</p>
      <p>Episodes: ${anime.episodes ?? "Unknown"}</p>
    </div>
  `;
    })
    .join("");
  animeCardsContainer.innerHTML = animeHTMLModel;
}

displayAnimeData("loop");