main.js

const base_url = "https://api.jikan.moe/v3";

function searchAnime(event) {
  event.preventDefault();

  const form = new FormData(this);
  const query = form.get("search");

  fetch(`${base_url}/search/anime?q=${query}&page=1`)
    .then((res) => res.json())
    .then(updateDom)
    .catch((err) => console.warn(err.message));
}

function updateDom(data) {
  const searchResults = document.getElementById("search-results");

  const animeByCategories = data.results.reduce((acc, anime) => {
    const { type } = anime;
    if (acc[type] === undefined) acc[type] = [];
    acc[type].push(anime);
    return acc;
  }, {});

  searchResults.innerHTML = Object.keys(animeByCategories)
    .map((key) => {
      const animesHTML = animeByCategories[key]
        .sort((a, b) => a.episodes - b.episodes)
        .map((anime) => {
          return `
              
                    <div class="card">
                        <div class="card-image yellow darken-3">
                            <img src="${anime.image_url}">
                        </div>
                        <div class="card-content">
                            <span class="card-title yellow-text text-darken-3">${anime.title}</span>
                            <p>${anime.synopsis}</p>
                        </div>
                        <div class="card-action">
                            <a href="${anime.url}">Find out more</a>
                        </div>
                    </div>
                
                `;
        })
        .join("");

      return `
                <section>
                    <h3 class="category-title">${key.toUpperCase()}</h3>
                    <div class="animes-row row">${animesHTML}</div>
                </section>
            `;
    })
    .join("");
}

function pageLoaded() {
  const form = document.getElementById("search_form");
  form.addEventListener("submit", searchAnime);
}

window.addEventListener("load", pageLoaded);