diff --git a/js/anime_about.js b/js/anime_about.js index c18e7fe..5234b5b 100644 --- a/js/anime_about.js +++ b/js/anime_about.js @@ -144,6 +144,53 @@ function nullFuncSearch(str) { } } +function animeContainer(str) { + const animeCard = document.createElement("div"); + animeCard.classList.add("search-anime-cards"); + + const image = document.createElement("img"); + image.classList.add("search-anime-image"); + image.src = str.coverImage.extraLarge; + + const format = nullfunc(str.format); + const episodes = nullfunc(str.episodes); + const season = nullfunc(str.season); + const endDate = nullfunc(str.endDate.year); + const averageScore = nullfunc(str.averageScore); + + const details = document.createElement("div"); + details.classList.add("search-anime-details"); + details.innerHTML = ` +

${str.title.romaji}

+ + + + + + + + + + +
  ${format} (${episodes} Episodes)
+
+    +
+ ${season} ${endDate} +
+
+
  ${averageScore}%
` + + animeCard.appendChild(image); + animeCard.appendChild(details); + container.appendChild(animeCard); + + animeCard.addEventListener("click", function () { + localStorageFunc(str); + window.location.href = "anime_about.html"; + }); +} + //-----------------------------------------------Adding event listeners to search button------------------------------------------------- @@ -261,50 +308,14 @@ query ($title: String) { function handleData(data) { console.log(data, "Search anime"); for (const anime of data.data.Page.media) { - const animeCard = document.createElement("div"); - animeCard.classList.add("search-anime-cards"); - - const image = document.createElement("img"); - image.classList.add("search-anime-image"); - image.src = anime.coverImage.extraLarge; - - const format = nullFuncSearch(anime.format); - const episodes = nullFuncSearch(anime.episodes); - const season = nullFuncSearch(anime.season); - const endDate = nullFuncSearch(anime.endDate.year); - const averageScore = nullFuncSearch(anime.averageScore); - - const details = document.createElement("div"); - details.classList.add("search-anime-details"); - details.innerHTML = ` -

${anime.title.romaji}

- - - - - - - - - - -
  ${format} (${episodes} Episodes)
-
-    -
- ${season} ${endDate} -
-
-
  ${averageScore}%
` - - animeCard.appendChild(image); - animeCard.appendChild(details); - container.appendChild(animeCard); - - animeCard.addEventListener("click", function () { - localStorageFunc(anime); - window.location.href = "anime_about.html"; - }); + if (data.data.Page.media.length === 1) { + container.style.height = "241px"; + animeContainer(anime); + } + else { + container.style.height = "486px"; + animeContainer(anime); + } } }