From 5d4574415069185f29aad4f3cb424a0d8c59795f Mon Sep 17 00:00:00 2001 From: Atharva Karanjekar Date: Sat, 15 Jun 2024 11:38:57 +0530 Subject: [PATCH] combined anime_about.html and index.html into one page --- anime_about.html | 53 -- css/anime_about.css | 289 ----------- css/index.css | 171 +++++++ index.html | 57 ++- js/anime_about.js | 662 ------------------------ js/index.js | 1172 ++++++++++++++++++++++++++++--------------- 6 files changed, 969 insertions(+), 1435 deletions(-) delete mode 100644 anime_about.html delete mode 100644 css/anime_about.css delete mode 100644 js/anime_about.js diff --git a/anime_about.html b/anime_about.html deleted file mode 100644 index 1324211..0000000 --- a/anime_about.html +++ /dev/null @@ -1,53 +0,0 @@ - - - - - Anime見る - - - - - - - - - - - - - -
- -
-
-
-

-

-

-
-
- -
-
- -
-
-
-
-
-
-

Relations

-
-
-
- - - - \ No newline at end of file diff --git a/css/anime_about.css b/css/anime_about.css deleted file mode 100644 index 15e0a2b..0000000 --- a/css/anime_about.css +++ /dev/null @@ -1,289 +0,0 @@ -body { - background-color: rgb(20, 20, 20); - color: white; -} - -#navbar { - margin: -8px; - padding: 10px; - display: flex; - flex-direction: row; - position: fixed; - width: 100%; - background-color: rgb(20, 20, 20); - z-index: 1; -} - -#name-header { - font-size: 30px; - margin: 6px 5px; - float: left; - font-family: 'Mochiy Pop One'; - color: #ef476f; -} - -#input-box { - font-size: 20px; - padding: 10px; - margin: 0px 10px; - width: 497px; - background-color: rgb(52, 52, 52); - border: none; - color: white; - outline: none; - border-radius: 5px; - font-family: 'Quicksand'; -} - -#search-button { - font-size: 30px; - padding: 10px; - border-radius: 5px; - border: none; - cursor: pointer; - font-family: 'Quicksand'; - background-color: rgb(20, 20, 20); - color: white; -} - -#container { - border: 1px solid rgb(40, 40, 40); - height: 486px; - width: 497px; - float: left; - margin-left: 184px; - margin-top: 65px; - display: none; - position: fixed; - z-index: 1; - font-family: 'Quicksand'; - background-color: rgb(20, 20, 20); - border-radius: 5px; - overflow-y: scroll; -} - -#container::-webkit-scrollbar { - width: 12px; -} - -#container::-webkit-scrollbar-track { - background: rgb(40, 40, 40); -} - -#container::-webkit-scrollbar-thumb { - background: rgb(80, 80, 80); - border-radius: 20px; -} - -.search-anime-cards { - margin: 10px; - height: fit-content; - display: flex; - flex-direction: row; - cursor: pointer; - border-radius: 5px; - transition: 0.5s; -} - -.search-anime-cards:hover { - background-color: rgb(40, 40, 40); - transition: 0.5s; -} - -.search-anime-image { - width: 137px; - height: 200px; - contain: content; - border-radius: 5px; - margin: 10px; - object-fit: cover; -} - -.search-anime-details-main-div { - display: flex; -} - -.search-anime-details { - height: 173px; - width: fit-content; - margin: 10px; - text-align: center; -} - -.search-anime-title { - font-size: 20px; - display: -webkit-box; - overflow: hidden; - text-overflow: ellipsis; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - margin: 10px 10px; - font-family: 'Quicksand'; - font-weight: 600; - text-align: left; -} - -#title-div { - position: absolute; - height: fit-content; - left: 0; - right: 0; - margin: auto; - margin-top: 69px; - font-family: 'Quicksand'; - display: flex; - flex-direction: column; -} - -#banner-image-div { - position: absolute; - background-color: rgb(40, 40, 40); - left: 0; - right: 0; - margin: auto; - margin-top: 69px; - font-family: 'Quicksand'; - display: flex; - flex-direction: column; - z-index: -1; - box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5); -} - -.banner-image { - opacity: 0.5; -} - -#anime-title { - margin-left: 20px; - float: left; - width: fit-content; -} - -#anime-title-jap, -#anime-title-eng { - margin-top: -15px; - margin-left: 20px; - float: left; - width: fit-content; -} - -#anime-outermost-details-div { - display: flex; - flex-direction: column; - height: fit-content; - position: absolute; - left: 0; - right: 0; - margin: auto; - margin-top: 262px; -} - -#synopsis-div, -#relations-div { - border-radius: 10px; - margin: 20px; - padding: 20px; - font-family: 'Quicksand'; - font-size: 20px; - text-align: left; - background-color: rgb(40, 40, 40); -} - -#relations-header { - font-size: 30px; - font-weight: 500; - margin-left: 0px; - text-align: center; -} - -#synopsis-header { - font-size: 30px; - font-weight: 500; - margin-left: 0px; - text-align: center; - margin-bottom: 35px; -} - -#relations-table tr { - font-size: 20px; - height: 40px; -} - -#relations-table td:first-child { - width: 135px; -} - -#genre-div { - font-size: 20px; - float: left; - width: fit-content; - margin-top: -13px; - margin-left: 20px; - margin-bottom: 21px; -} - -#anime-details-main-div { - display: flex; - flex-direction: row; -} - -#anime-image { - width: 287px; - height: fit-content; - float: left; - margin: 20px; - border-radius: 10px; -} - -#anime-stats-div { - width: fit-content; - height: fit-content; - border-radius: 10px; - float: left; - margin: 20px 0px; - margin-right: 20px; - background-color: rgb(40, 40, 40); -} - -#anime-details-div { - width: fit-content; - height: fit-content; - border-radius: 10px; - float: left; - margin: 20px 0px; - background-color: rgb(40, 40, 40); -} - -#anime-stats-table { - font-family: 'Quicksand'; - font-size: 20px; - margin: 20px; -} - -#anime-info-table { - font-family: 'Quicksand'; - font-size: 20px; - margin: 20px; -} - -#anime-stats-table tr, -#anime-info-table tr { - height: 30px; -} - -#anime-stats-table td:first-child, -#anime-info-table td:first-child { - width: 110px; -} - -#anime-stats-table td:last-child { - width: 150px; -} - -#anime-info-table td:last-child { - width: 300px; -} - -.title-elements:hover { - cursor: pointer; -} \ No newline at end of file diff --git a/css/index.css b/css/index.css index e501005..324f481 100644 --- a/css/index.css +++ b/css/index.css @@ -286,4 +286,175 @@ body { width: fit-content; margin: 10px; font-family: 'Quicksand'; +} + +/* ----------------------------------------Anime full details div css--------------------------------------------------------- */ + +#anime-div, #anime-full-details-div { + display: none; +} + +#title-div { + position: absolute; + height: fit-content; + left: 0; + right: 0; + margin: auto; + margin-top: 69px; + font-family: 'Quicksand'; + display: flex; + flex-direction: column; +} + +#banner-image-div { + position: absolute; + background-color: rgb(40, 40, 40); + left: 0; + right: 0; + margin: auto; + margin-top: 69px; + font-family: 'Quicksand'; + display: flex; + flex-direction: column; + z-index: -1; + box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5); +} + +.banner-image { + opacity: 0.5; +} + +#anime-title { + margin-left: 20px; + float: left; + width: fit-content; +} + +#anime-title-jap, +#anime-title-eng { + margin-top: -15px; + margin-left: 20px; + float: left; + width: fit-content; +} + +#anime-outermost-details-div { + display: flex; + flex-direction: column; + height: fit-content; + position: absolute; + left: 0; + right: 0; + margin: auto; + margin-top: 262px; +} + +#synopsis-div, +#relations-div { + border-radius: 10px; + margin: 20px; + padding: 20px; + font-family: 'Quicksand'; + font-size: 20px; + text-align: left; + background-color: rgb(40, 40, 40); +} + +#relations-header { + font-size: 30px; + font-weight: 500; + margin-left: 0px; + text-align: center; +} + +#synopsis-header { + font-size: 30px; + font-weight: 500; + margin-left: 0px; + text-align: center; + margin-bottom: 35px; +} + +#relations-table tr { + font-size: 20px; + height: 40px; +} + +#relations-table td:first-child { + width: 135px; +} + +#genre-div { + font-size: 20px; + float: left; + width: fit-content; + margin-top: -13px; + margin-left: 20px; + margin-bottom: 21px; +} + +#anime-details-main-div { + display: flex; + flex-direction: row; +} + +#anime-image { + width: 287px; + height: fit-content; + float: left; + margin: 20px; + border-radius: 10px; +} + +#anime-stats-div { + width: fit-content; + height: fit-content; + border-radius: 10px; + float: left; + margin: 20px 0px; + margin-right: 20px; + background-color: rgb(40, 40, 40); +} + +#anime-details-div { + width: fit-content; + height: fit-content; + border-radius: 10px; + float: left; + margin: 20px 0px; + background-color: rgb(40, 40, 40); +} + +#anime-stats-table { + font-family: 'Quicksand'; + font-size: 20px; + margin: 20px; +} + +#anime-info-table { + font-family: 'Quicksand'; + font-size: 20px; + margin: 20px; +} + +#anime-stats-table tr, +#anime-info-table tr { + height: 30px; +} + +#anime-stats-table td:first-child, +#anime-info-table td:first-child { + width: 110px; +} + +#anime-stats-table td:last-child { + width: 150px; +} + +#anime-info-table td:last-child { + width: 300px; +} + +.title-elements:hover { + cursor: pointer; } \ No newline at end of file diff --git a/index.html b/index.html index 194192b..012549d 100644 --- a/index.html +++ b/index.html @@ -27,25 +27,50 @@
-

This Season

- - -
-
+
+

This Season

+ + +
+
-

Popular Anime

- - - +

Popular Anime

+ + + + +

Top Anime

+ + +
+
-

Top Anime

- - -
+
+
+

+

+

+
+
+ +
+
+ +
+
+
+
+
+
+

Relations

+
+
+
+ diff --git a/js/anime_about.js b/js/anime_about.js deleted file mode 100644 index 8d9a4ac..0000000 --- a/js/anime_about.js +++ /dev/null @@ -1,662 +0,0 @@ -const inputBox = document.getElementById("input-box"); -const container = document.getElementById("container"); -const searchBtn = document.getElementById("search-button"); -const navBar = document.getElementById("navbar"); -const nextBtn = document.getElementById("next-airing"); -const previousBtn = document.getElementById("previous-airing"); - -function localStorageFunc(str) { - localStorage.setItem("image", str.coverImage.extraLarge); - localStorage.setItem("start year", str.startDate.year); - localStorage.setItem("start month", str.startDate.month); - localStorage.setItem("start day", str.startDate.day); - localStorage.setItem("end year", str.endDate.year); - localStorage.setItem("end month", str.endDate.month); - localStorage.setItem("end day", str.endDate.day); - localStorage.setItem("duration", str.duration); - localStorage.setItem("episodes", str.episodes); - localStorage.setItem("popularity", str.popularity); - localStorage.setItem("favourites", str.favourites); - localStorage.setItem("score", str.averageScore); - localStorage.setItem("id", str.id); - localStorage.setItem("banner image", str.bannerImage); - - const sourceMap = { - "ORIGINAL": "Original", - "MANGA": "Manga", - "LIGHT_NOVEL": "Light Novel", - "VISUAL_NOVEL": "Visual Novel", - "VIDEO_GAME": "Video Game", - "OTHER": "Other", - "NOVEL": "Novel", - "DOUJINSHI": "Doujinshi", - "ANIME": "Anime", - "WEB_NOVEL": "Web Novel", - "LIVE_ACTION": "Live Action", - "GAME": "Game", - "COMIC": "Comic", - "MULTIMEDIA_PROJECT": "Multimedia Project", - "PICTURE_BOOK": "Picture Book", - }; - - str.source = sourceMap[str.source] || str.source; - localStorage.setItem("source", str.source); - - const seasonMap = { - "WINTER": "Winter", - "SPRING": "Spring", - "SUMMER": "Summer", - "FALL": "Fall", - }; - - str.season = seasonMap[str.season] || str.season; - localStorage.setItem("season", str.season); - - const statusMap = { - "FINISHED": "Finished", - "RELEASING": "Releasing", - "NOT_YET_RELEASED": "Not Yet Released", - "CANCELLED": "Cancelled", - "HIATUS": "Hiatus" - }; - - str.status = statusMap[str.status] || str.status; - localStorage.setItem("status", str.status); - - localStorage.setItem("description", str.description); - localStorage.setItem("title", str.title.romaji); - localStorage.setItem("title native", str.title.native); - localStorage.setItem("title english", str.title.english); - - const studiosList = []; - const nodes = str.studios.nodes; - - for (let i = 0; i < nodes.length; i++) { - studiosList.push(" " + nodes[i].name); - } - - localStorage.setItem("studios", studiosList); - - const genreList = []; - const genres = str.genres; - - for (let i = 0; i < genres.length; i++) { - genreList.push(" " + genres[i]); - } - - localStorage.setItem("genre", genreList); - - let totalSum = 0; - for (let i = 0; i < str.stats.scoreDistribution.length; i++) { - totalSum += str.stats.scoreDistribution[i].amount; - } - - localStorage.setItem("scored by", totalSum); - const relationTypeList = []; - - for (let i = 0; i < str.relations.edges.length; i++) { - const relationMap = { - "ADAPTATION": "Adaptation", - "PREQUEL": "Prequel", - "SEQUEL": "Sequel", - "SIDE_STORY": "Side Story", - "PARENT": "Parent", - "CHARACTER": "Character", - "SUMMARY": "Summary", - "ALTERNATIVE": "Alternative", - "SPIN_OFF": "Spin Off", - "OTHER": "Other", - "SOURCE": "Source", - "COMPILATION": "Compilation", - "CONTAINS": "Contains", - }; - - str.relations.edges[i].relationType = relationMap[str.relations.edges[i].relationType] || str.relations.edges[i].relationType; - relationTypeList.push(" " + JSON.stringify(str.relations.edges[i].relationType)); - } - - localStorage.setItem("relation types", relationTypeList); - - const relationTitleList = []; - - for (let i = 0; i < str.relations.edges.length; i++) { - relationTitleList.push(" " + JSON.stringify(str.relations.edges[i].node.title.romaji)); - } - - localStorage.setItem("relation titles", relationTitleList); - - const relationIdList = []; - - for (let i = 0; i < str.relations.edges.length; i++) { - relationIdList.push(" " + str.relations.edges[i].id); - } - - localStorage.setItem("relation ids", relationIdList); - - const format = { - "TV_SHORT": "TV Short", - "MOVIE": "Movie", - "SPECIAL": "Special", - "MUSIC": "Music", - "MANGA": "Manga", - "NOVEL": "Novel", - "ONE_SHOT": "One-shot" - } - - str.format = format[str.format] || str.format; - localStorage.setItem("format", str.format); -} - -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 = nullFuncSearch(str.format); - - const formatMap = { - "TV_SHORT": "TV Short", - "MOVIE": "Movie", - "SPECIAL": "Special", - "MUSIC": "Music", - "MANGA": "Manga", - "NOVEL": "Novel", - "ONE_SHOT": "One-shot" - } - - const updatedFormatString = formatMap[format] || format; - - const episodes = nullFuncSearch(str.episodes); - const season = nullFuncSearch(str.season); - - const seasonMap = { - "WINTER": "Winter", - "SPRING": "Spring", - "SUMMER": "Summer", - "FALL": "Fall", - }; - - const updatedSeasonString = seasonMap[season] || season; - - const endDate = nullFuncSearch(str.endDate.year); - const averageScore = nullFuncSearch(str.averageScore); - - const details = document.createElement("div"); - details.classList.add("search-anime-details"); - details.innerHTML = ` -

${str.title.romaji}

- - - - - - - - - - -
  ${updatedFormatString} (${episodes} Episodes)
-
-    -
- ${updatedSeasonString} ${endDate} -
-
-
  ${averageScore}%
` - - animeCard.appendChild(image); - animeCard.appendChild(details); - container.appendChild(animeCard); - - animeCard.addEventListener("click", function () { - localStorageFunc(str); - window.location.href = "anime_about.html"; - }); -} - -function nullFuncSearch(str) { - if (str === null) { - return "N/A"; - } - else { - return str; - } -} - - -//-----------------------------------------------Adding event listeners to search button------------------------------------------------- - - -document.body.addEventListener("click", function (event) { - if (!event.target.closest("#search-button")) { - container.innerHTML = ""; - container.style.display = "none"; - } -}); - -searchBtn.addEventListener("click", () => { - container.style.display = "flex"; - container.style.flexDirection = "column"; - - if (inputBox.value === "") { - container.style.display = "none"; - return false; - } - - container.innerHTML = ""; - - var query = ` -query ($title: String) { - Page { - media (search: $title, type: ANIME, isAdult: false) { - id - title { - romaji - english - native - } - description - startDate { - year - month - day - } - endDate { - year - month - day - } - season - episodes - relations { - edges { - id - relationType - node { - title { - romaji - english - native - } - } - } - } - duration - format - status - studios { - nodes { - id - name - } - } - genres - source - stats { - scoreDistribution { - amount - } - } - averageScore - popularity - favourites - coverImage { - large - extraLarge - } - bannerImage - - } - } - }`; - - var variables = { - title: inputBox.value, - }; - - var url = 'https://graphql.anilist.co', - options = { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'Accept': 'application/json', - }, - body: JSON.stringify({ - query: query, - variables: variables - }) - }; - - fetch(url, options).then(handleResponse) - .then(handleData) - .catch(handleError); - - function handleResponse(response) { - return response.json().then(function (json) { - return response.ok ? json : Promise.reject(json); - }); - } - - function handleData(data) { - console.log(data, "Search anime"); - for (const anime of data.data.Page.media) { - if (data.data.Page.media.length === 1) { - container.style.height = "241px"; - animeContainer(anime); - } - else { - container.style.height = "486px"; - animeContainer(anime); - } - } - } - - function handleError(error) { - alert('Error, check console'); - console.error(error); - } -}); - -//---------------------------------------------------------------------------------------------------------------------------------------- - -const bannerImageDiv = document.getElementById("banner-image-div"); -const bannerImage = document.createElement("img"); -bannerImage.classList.add("banner-image"); -bannerImage.src = localStorage.getItem("banner image"); - -if (bannerImage.src === "http://127.0.0.1:5500/null") { - localStorage.removeItem("banner image"); - bannerImageDiv.style.display = "none"; -} -else { - bannerImageDiv.appendChild(bannerImage); -} - -const animeImage = document.getElementById("anime-image"); -animeImage.src = localStorage.getItem("image"); - -const animeTitle = document.getElementById("anime-title"); -const titleKey = localStorage.getItem("title"); -animeTitle.innerText = `${titleKey}`; - -const animeTitleJap = document.getElementById("anime-title-jap"); -const titleJapKey = localStorage.getItem("title native"); -animeTitleJap.innerText = `${titleJapKey}`; - -const animeTitleEng = document.getElementById("anime-title-eng"); -const titleEngKey = localStorage.getItem("title english"); -animeTitleEng.innerText = `${nullfunc(titleEngKey)}`; - -const synopsisDiv = document.getElementById("synopsis-div"); -const synopsis = nullfunc(localStorage.getItem("description")); -synopsisDiv.innerHTML = `

Synopsis

-

${synopsis}

`; - -const genreDiv = document.getElementById("genre-div"); -const genreList = localStorage.getItem("genre"); - -genreDiv.innerText = `${genreList}`; - -function capitalizeFirstLetter(str) { - if (str === "null") { - return "Unavailable"; - } - - return str.replace(/\w/, function (char) { - return char.toUpperCase(); - }); -} - -function nullfunc(str) { - if (str === "null") { - return "Unavailable"; - } - else { - return str; - } -} - -const type = nullfunc(localStorage.getItem("format")); -const episodes = nullfunc(localStorage.getItem("episodes")); -const duration = nullfunc(localStorage.getItem("duration")); - -let startYear = localStorage.getItem("start year"); -let startMonth = localStorage.getItem("start month"); -let startDay = localStorage.getItem("start day"); -let endYear = localStorage.getItem("end year"); -let endMonth = localStorage.getItem("end month"); -let endDay = localStorage.getItem("end day"); - -if (endDay === "null") { - endDay = "?"; -} -if (endMonth === "null") { - endMonth = "?"; -} -if (endYear === "null") { - endYear = "?"; -} -if (startDay === "null") { - startDay = "?"; -} -if (startMonth === "null") { - startMonth = "?"; -} -if (startYear === "null") { - startYear = "?"; -} - -const statusKey = nullfunc(localStorage.getItem("status")); -const source = nullfunc(localStorage.getItem("source")); -const studios = nullfunc(localStorage.getItem("studios")); - -const aniSeason = capitalizeFirstLetter(localStorage.getItem("season")); - -const animeDetailsDiv = document.getElementById("anime-details-div"); -animeDetailsDiv.innerHTML = - ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Type:${type}
Episodes:${episodes}
Duration:${duration} min
Broadcast:${startDay}/${startMonth}/${startYear} to ${endDay}/${endMonth}/${endYear}
Status:${statusKey}
Source:${source}
Studios:${studios}
Season:${aniSeason}
`; - -const score = nullfunc(localStorage.getItem("score")); -const scoredBy = nullfunc(localStorage.getItem("scored by")); -const favourites = nullfunc(localStorage.getItem("favourites")); -const popularity = nullfunc(localStorage.getItem("popularity")); - - -const animeStatsDiv = document.getElementById("anime-stats-div"); -animeStatsDiv.innerHTML = - ` - - - - - - - - - - - - -
Score:${score}% (${scoredBy})
Favourites:#${favourites}
Popularity:#${popularity}
`; - -const relationsDiv = document.getElementById("relations-div"); -const relationTitles = localStorage.getItem("relation titles").split(","); -const relationTypes = localStorage.getItem("relation types").split(","); -const titleIds = localStorage.getItem("relation ids").split(","); - -if (localStorage.getItem("relation types") === "") { - localStorage.removeItem(localStorage.getItem("relation types")); - localStorage.removeItem(localStorage.getItem("relation titles")); - localStorage.removeItem(localStorage.getItem("relation ids")); - relationsDiv.style.display = "none"; -} -else { - const dataLength = Math.min(relationTypes.length, relationTitles.length, titleIds.length); - for (let i = 0; i < dataLength; i++) { - relationsDiv.innerHTML += ` - - - - - -
${JSON.parse(relationTypes[i])}:${relationTitles[i].slice(2, -1)}
`; - } -} - -const titleElements = document.querySelectorAll('#relations-table td:nth-child(2)'); - -for (let i = 0; i < titleElements.length; i++) { - titleElements[i].style.color = "skyblue"; - titleElements[i].classList.add("title-elements"); - - titleElements[i].addEventListener('click', function (event) { - console.log(event.target.id); - const animeTitle = titleElements[i].textContent; - console.log(titleIds[parseInt(event.target.id.slice(-1))]); - - function fetchAnimeData(title) { - var query = ` - query ($title: String) { - Media(search: $title, type: ANIME) { - id - title { - romaji - english - native - } - description - startDate { - year - month - day - } - endDate { - year - month - day - } - season - episodes - relations { - edges { - id - relationType - node { - title { - romaji - english - native - } - } - } - } - duration - format - status - studios { - nodes { - id - name - } - } - genres - source - stats { - scoreDistribution { - amount - } - } - averageScore - popularity - favourites - coverImage { - large - extraLarge - } - bannerImage - } - }`; - - var variables = { - title: title - }; - - var url = 'https://graphql.anilist.co', - options = { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'Accept': 'application/json', - }, - body: JSON.stringify({ - query: query, - variables: variables - }) - }; - - fetch(url, options).then(handleResponse) - .then(handleData) - .catch(handleError); - - function handleResponse(response) { - return response.json().then(function (json) { - return response.ok ? json : Promise.reject(json); - }); - } - - function handleData(data) { - console.log(data); - localStorageFunc(data.data.Media); - window.location.href = "anime_about.html"; - } - - function handleError(error) { - alert('Error, check console'); - console.error(error); - } - } - fetchAnimeData(animeTitle); - }); -} - -document.addEventListener("keypress", function (event) { - if (event.key === "Enter") { - searchBtn.click(); - } -}); \ No newline at end of file diff --git a/js/index.js b/js/index.js index b3b1340..3f7cbfe 100644 --- a/js/index.js +++ b/js/index.js @@ -1,3 +1,25 @@ +const routes = { + '/': homePageDiv, + '/anime_about': animeAboutDiv, +}; + + +function router() { + const path = window.location.hash.slice(1) || '/'; + const route = routes[path]; + + if (route) { + route(); + } + else { + document.getElementById('anime-div').innerHTML = '404 Page Not Found'; + } +} + +window.addEventListener('hashchange', router); +window.addEventListener('load', router); + + const inputBox = document.getElementById("input-box"); const container = document.getElementById("container"); const searchBtn = document.getElementById("search-button"); @@ -20,7 +42,7 @@ function localStorageFunc(str) { localStorage.setItem("favourites", str.favourites); localStorage.setItem("score", str.averageScore); localStorage.setItem("id", str.id); - localStorage.setItem("banner image", str.bannerImage); + // localStorage.setItem("banner image", str.bannerImage); const sourceMap = { "ORIGINAL": "Original", @@ -115,7 +137,6 @@ function localStorageFunc(str) { str.relations.edges[i].relationType = relationMap[str.relations.edges[i].relationType] || str.relations.edges[i].relationType; relationTypeList.push(" " + JSON.stringify(str.relations.edges[i].relationType)); } - localStorage.setItem("relation types", relationTypeList); const relationTitleList = []; @@ -146,6 +167,8 @@ function localStorageFunc(str) { str.format = format[str.format] || str.format; localStorage.setItem("format", str.format); + + window.location.href = "#/anime_about"; } function nullfunc(str) { @@ -223,10 +246,23 @@ function animeContainer(str) { animeCard.addEventListener("click", function () { localStorageFunc(str); - window.location.href = "anime_about.html"; + animeAboutDiv(); }); } +function nullFuncSearch(str) { + if (str === null) { + return "N/A"; + } + else { + return str; + } +} + +const animeAboutDetailsDiv = document.getElementById("anime-full-details-div"); +const animeHomePageDiv = document.getElementById("anime-div"); + + //-----------------------------------------------Adding event listeners to scroll buttons-------------------------------------------------- nextBtn.addEventListener("click", function () { @@ -375,478 +411,784 @@ query ($title: String) { const airingNowDiv = document.getElementById("airing-now-container"); -function fetchAiringNowData() { - var query = ` -query ($page: Int, $perPage: Int, $season: MediaSeason) { - Page (page: $page, perPage: $perPage) { - pageInfo { - total - currentPage - lastPage - hasNextPage - perPage - } - media(season: $season, type: ANIME, status: RELEASING, sort: POPULARITY_DESC, isAdult: false) { - id - title { - romaji - english - native - } - startDate { - year - month - day - } - endDate { - year - month - day - } - coverImage { - large - extraLarge - } - bannerImage - episodes - format - duration - stats { - scoreDistribution { - amount +function homePageDiv() { + animeHomePageDiv.style.display = "block"; + animeAboutDetailsDiv.style.display = "none"; + + function fetchAiringNowData() { + var query = ` + query ($page: Int, $perPage: Int, $season: MediaSeason) { + Page (page: $page, perPage: $perPage) { + pageInfo { + total + currentPage + lastPage + hasNextPage + perPage + } + media(season: $season, type: ANIME, status: RELEASING, sort: POPULARITY_DESC, isAdult: false) { + id + title { + romaji + english + native } - } - popularity - genres - favourites - source - studios { - nodes { + startDate { + year + month + day + } + endDate { + year + month + day + } + coverImage { + large + extraLarge + } + bannerImage + episodes + format + duration + stats { + scoreDistribution { + amount + } + } + popularity + genres + favourites + source + studios { + nodes { + id + name + } + } + status + description + relations { + edges { id - name + relationType + node { + title { + romaji + english + native + } + } + } } - } - status - description - relations { - edges { - id - relationType - node { - title { - romaji - english - native - } - } + season + averageScore + nextAiringEpisode { + airingAt + timeUntilAiring + episode } + } } - season - averageScore - nextAiringEpisode { - airingAt - timeUntilAiring - episode - } - } - } - }`; + }`; - function getSeason() { - const month = new Date().getMonth(); + function getSeason() { + const month = new Date().getMonth(); - if (month >= 3 && month <= 5) { - return "SPRING"; - } - else if (month >= 6 && month <= 8) { - return "SUMMER"; - } - else if (month >= 9 && month <= 11) { - return "FALL"; + if (month >= 3 && month <= 5) { + return "SPRING"; + } + else if (month >= 6 && month <= 8) { + return "SUMMER"; + } + else if (month >= 9 && month <= 11) { + return "FALL"; + } + else { + return "WINTER"; + } } - else { - return "WINTER"; + + var variables = { + page: 1, + perPage: 10, + season: getSeason(), + seasonYear: 2024 } - } - var variables = { - page: 1, - perPage: 10, - season: getSeason(), - seasonYear: 2024 + var url = 'https://graphql.anilist.co', + options = { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Accept': 'application/json', + }, + body: JSON.stringify({ + query: query, + variables: variables + }) + }; + + fetch(url, options).then(handleResponse) + .then(handleAiringNowData) + .catch(handleError); } - var url = 'https://graphql.anilist.co', - options = { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'Accept': 'application/json', - }, - body: JSON.stringify({ - query: query, - variables: variables - }) - }; + function handleResponse(response) { + return response.json().then(function (json) { + return response.ok ? json : Promise.reject(json); + }); + } - fetch(url, options).then(handleResponse) - .then(handleAiringNowData) - .catch(handleError); -} + function handleAiringNowData(data) { + console.log(data, "Currently airing anime"); + for (const anime of data.data.Page.media) { + const animeCard = document.createElement("div"); + animeCard.classList.add("airing-now-anime-cards"); + + const image = document.createElement("img"); + image.classList.add("airing-now-image"); + image.src = anime.coverImage.extraLarge; + + const averageScore = nullfunc(anime.averageScore); + + const airingDate = new Date(anime.nextAiringEpisode.airingAt * 1000); + + const details = document.createElement("div"); + details.classList.add("airing-now-anime-details"); + details.innerHTML = ` +

${anime.title.romaji}

+ + + + + + + + + + + + + +
Score: ${averageScore}%
Broadcast: +
+
+ +
  +
+ ${airingDate} +
+
+
Next Episode: ${anime.nextAiringEpisode.episode}
`; -function handleResponse(response) { - return response.json().then(function (json) { - return response.ok ? json : Promise.reject(json); - }); -} + animeCard.appendChild(image); + animeCard.appendChild(details); + airingNowDiv.appendChild(animeCard); -function handleAiringNowData(data) { - console.log(data, "Currently airing anime"); - for (const anime of data.data.Page.media) { - const animeCard = document.createElement("div"); - animeCard.classList.add("airing-now-anime-cards"); - - const image = document.createElement("img"); - image.classList.add("airing-now-image"); - image.src = anime.coverImage.extraLarge; - - const averageScore = nullfunc(anime.averageScore); - - const airingDate = new Date(anime.nextAiringEpisode.airingAt * 1000); - - const details = document.createElement("div"); - details.classList.add("airing-now-anime-details"); - details.innerHTML = ` -

${anime.title.romaji}

- - - - - - - - - - - - - -
Score: ${averageScore}%
Broadcast: -
-
- -
  -
- ${airingDate} -
-
-
Next Episode: ${anime.nextAiringEpisode.episode}
`; - - animeCard.appendChild(image); - animeCard.appendChild(details); - airingNowDiv.appendChild(animeCard); - - animeCard.addEventListener("click", function () { - localStorageFunc(anime); - window.location.href = "anime_about.html"; - }); + animeCard.addEventListener("click", function () { + localStorageFunc(anime); + }); + } } -} -function handleError(error) { - alert('Error, check console'); - console.error(error); -} + function handleError(error) { + alert('Error, check console'); + console.error(error); + } -fetchAiringNowData(); + fetchAiringNowData(); -//-----------------------------------------------Fetching popular anime data and displaying it------------------------------------------------- + //-----------------------------------------------Fetching popular anime data and displaying it------------------------------------------------- -const popAnimeDiv = document.getElementById("popular-anime-container"); -const nextPopButton = document.getElementById("next-popular-anime"); -const previousPopButton = document.getElementById("previous-popular-anime"); + const popAnimeDiv = document.getElementById("popular-anime-container"); + const nextPopButton = document.getElementById("next-popular-anime"); + const previousPopButton = document.getElementById("previous-popular-anime"); -nextPopButton.addEventListener("click", function () { - popAnimeDiv.scrollLeft += 400; -}); + nextPopButton.addEventListener("click", function () { + popAnimeDiv.scrollLeft += 400; + }); -previousPopButton.addEventListener("click", function () { - popAnimeDiv.scrollLeft -= 400; -}); + previousPopButton.addEventListener("click", function () { + popAnimeDiv.scrollLeft -= 400; + }); -function fetchPopularAnimeData() { - var query = ` - query { - Page { - media(sort: POPULARITY_DESC, type: ANIME) { - id - title { - romaji - english - native - } - description - relations { - edges { - id - relationType - node { - title { - romaji - english - native - } - } + function fetchPopularAnimeData() { + var query = ` + query { + Page { + media(sort: POPULARITY_DESC, type: ANIME) { + id + title { + romaji + english + native + } + description + relations { + edges { + id + relationType + node { + title { + romaji + english + native + } + } + } + } + status + season + studios { + nodes { + id + name } } - status - season - studios { - nodes { - id - name + source + favourites + startDate { + year + month + day } - } - source - favourites - startDate { - year - month - day - } - endDate { - year - month - day - } - episodes - duration - stats { - scoreDistribution { - amount + endDate { + year + month + day } + episodes + duration + stats { + scoreDistribution { + amount + } + } + bannerImage + genres + format + averageScore + coverImage { + large + extraLarge + } + popularity } - bannerImage - genres - format - averageScore - coverImage { - large - extraLarge - } - popularity } - } - }`; - - var url = 'https://graphql.anilist.co', - options = { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'Accept': 'application/json', - }, - body: JSON.stringify({ - query: query - }) - }; - - fetch(url, options).then(handleResponse) - .then(handlePopularAnimeData) - .catch(handleError); -} - -function handleResponse(response) { - return response.json().then(function (json) { - return response.ok ? json : Promise.reject(json); - }); -} + }`; + + var url = 'https://graphql.anilist.co', + options = { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Accept': 'application/json', + }, + body: JSON.stringify({ + query: query + }) + }; + + fetch(url, options).then(handleResponse) + .then(handlePopularAnimeData) + .catch(handleError); + } -function handlePopularAnimeData(data) { - console.log(data, "Popular anime data"); - for (const anime of data.data.Page.media) { - const animeCard = document.createElement("div"); - animeCard.classList.add("anime-cards"); - - const image = document.createElement("img"); - image.classList.add("image"); - image.src = anime.coverImage.extraLarge; - - const details = document.createElement("div"); - details.classList.add("pop-anime-details"); - details.innerHTML = ` -

${anime.title.romaji}

- - - - -
 ${anime.averageScore}%
` - - animeCard.appendChild(image); - animeCard.appendChild(details); - popAnimeDiv.appendChild(animeCard); - - animeCard.addEventListener("click", function () { - localStorageFunc(anime); - window.location.href = "anime_about.html"; + function handleResponse(response) { + return response.json().then(function (json) { + return response.ok ? json : Promise.reject(json); }); } -} -function handleError(error) { - alert('Error, check console'); - console.error(error); -} + function handlePopularAnimeData(data) { + console.log(data, "Popular anime data"); + for (const anime of data.data.Page.media) { + const animeCard = document.createElement("div"); + animeCard.classList.add("anime-cards"); + + const image = document.createElement("img"); + image.classList.add("image"); + image.src = anime.coverImage.extraLarge; + + const details = document.createElement("div"); + details.classList.add("pop-anime-details"); + details.innerHTML = ` +

${anime.title.romaji}

+ + + + +
 ${anime.averageScore}%
` + + animeCard.appendChild(image); + animeCard.appendChild(details); + popAnimeDiv.appendChild(animeCard); + + animeCard.addEventListener("click", function () { + localStorageFunc(anime); + }); + } + } -fetchPopularAnimeData(); + function handleError(error) { + alert('Error, check console'); + console.error(error); + } -//-----------------------------------------------Fetching top anime data and displaying it------------------------------------------------- + fetchPopularAnimeData(); -const topAnimeDiv = document.getElementById("top-anime-container"); -const nextButton = document.getElementById("next-top-anime"); -const previousButton = document.getElementById("previous-top-anime"); + //-----------------------------------------------Fetching top anime data and displaying it------------------------------------------------- -nextButton.addEventListener("click", function () { - topAnimeDiv.scrollLeft += 400; -}); + const topAnimeDiv = document.getElementById("top-anime-container"); + const nextButton = document.getElementById("next-top-anime"); + const previousButton = document.getElementById("previous-top-anime"); -previousButton.addEventListener("click", function () { - topAnimeDiv.scrollLeft -= 400; -}); + nextButton.addEventListener("click", function () { + topAnimeDiv.scrollLeft += 400; + }); -function fetchTopAnimeData() { - var query = ` - query { - Page { - media(sort: SCORE_DESC, type: ANIME) { - id - title { - romaji - english - native - } - coverImage { - large - extraLarge - } - startDate { - year - month - day - } - endDate { - year - month - day - } - status - season - studios { - nodes { - id - name + previousButton.addEventListener("click", function () { + topAnimeDiv.scrollLeft -= 400; + }); + + function fetchTopAnimeData() { + var query = ` + query { + Page { + media(sort: SCORE_DESC, type: ANIME) { + id + title { + romaji + english + native } - } - source - favourites - popularity - relations { - edges { - id - relationType - node { - title { - romaji - english - native - } - } + coverImage { + large + extraLarge + } + startDate { + year + month + day + } + endDate { + year + month + day + } + status + season + studios { + nodes { + id + name } } - episodes - duration - genres - stats { - scoreDistribution { - amount + source + favourites + popularity + relations { + edges { + id + relationType + node { + title { + romaji + english + native + } + } + } + } + episodes + duration + genres + stats { + scoreDistribution { + amount + } } + format + description + averageScore + bannerImage } - format - description - averageScore - bannerImage } + }`; + + var variables = { + page: 1, + perPage: 10, } - }`; - var variables = { - page: 1, - perPage: 10, + var url = 'https://graphql.anilist.co', + options = { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Accept': 'application/json', + }, + body: JSON.stringify({ + query: query, + variables: variables + }) + }; + + fetch(url, options).then(handleResponse) + .then(handleTopAnimeData) + .catch(handleError); } - var url = 'https://graphql.anilist.co', - options = { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'Accept': 'application/json', - }, - body: JSON.stringify({ - query: query, - variables: variables - }) - }; + function handleResponse(response) { + return response.json().then(function (json) { + return response.ok ? json : Promise.reject(json); + }); + } - fetch(url, options).then(handleResponse) - .then(handleTopAnimeData) - .catch(handleError); -} + function handleTopAnimeData(data) { + console.log(data, "Top anime data"); + for (const anime of data.data.Page.media) { + const animeCard = document.createElement("div"); + animeCard.classList.add("anime-cards"); + + const image = document.createElement("img"); + image.classList.add("image"); + image.src = anime.coverImage.extraLarge; + + const details = document.createElement("div"); + details.classList.add("top-anime-details"); + details.innerHTML = ` +

${anime.title.romaji}

+ + + + +
 ${anime.averageScore}%
` + + animeCard.appendChild(image); + animeCard.appendChild(details); + topAnimeDiv.appendChild(animeCard); + + animeCard.addEventListener("click", function () { + localStorageFunc(anime); + }); + } + } -function handleResponse(response) { - return response.json().then(function (json) { - return response.ok ? json : Promise.reject(json); - }); + function handleError(error) { + alert('Error, check console'); + console.error(error); + } + + fetchTopAnimeData(); } -function handleTopAnimeData(data) { - console.log(data, "Top anime data"); - for (const anime of data.data.Page.media) { - const animeCard = document.createElement("div"); - animeCard.classList.add("anime-cards"); - - const image = document.createElement("img"); - image.classList.add("image"); - image.src = anime.coverImage.extraLarge; - - const details = document.createElement("div"); - details.classList.add("top-anime-details"); - details.innerHTML = ` -

${anime.title.romaji}

- - - - -
 ${anime.averageScore}%
` - - animeCard.appendChild(image); - animeCard.appendChild(details); - topAnimeDiv.appendChild(animeCard); - - animeCard.addEventListener("click", function () { - localStorageFunc(anime); - window.location.href = "anime_about.html"; +// ---------------------------------------------------------Anime about function------------------------------------------------------ + + +function animeAboutDiv() { + animeHomePageDiv.style.display = "none"; + animeAboutDetailsDiv.style.display = "block"; + + // const bannerImageDiv = document.getElementById("banner-image-div"); + // const bannerImage = document.createElement("img"); + // bannerImage.classList.add("banner-image"); + // bannerImage.src = localStorage.getItem("banner image"); + + // if (bannerImage.src === "http://127.0.0.1:5500/null") { + // localStorage.removeItem("banner image"); + // bannerImageDiv.style.display = "none"; + // } + // else { + // bannerImageDiv.appendChild(bannerImage); + // } + + const animeImage = document.getElementById("anime-image"); + animeImage.src = localStorage.getItem("image"); + + const animeTitle = document.getElementById("anime-title"); + const titleKey = localStorage.getItem("title"); + animeTitle.innerText = `${titleKey}`; + + const animeTitleJap = document.getElementById("anime-title-jap"); + const titleJapKey = localStorage.getItem("title native"); + animeTitleJap.innerText = `${titleJapKey}`; + + const animeTitleEng = document.getElementById("anime-title-eng"); + const titleEngKey = localStorage.getItem("title english"); + animeTitleEng.innerText = `${nullfunc(titleEngKey)}`; + + const synopsisDiv = document.getElementById("synopsis-div"); + const synopsis = nullfunc(localStorage.getItem("description")); + synopsisDiv.innerHTML = `

Synopsis

+

${synopsis}

`; + + const genreDiv = document.getElementById("genre-div"); + const genreList = localStorage.getItem("genre"); + + genreDiv.innerText = `${genreList}`; + + function capitalizeFirstLetter(str) { + if (str === "null") { + return "Unavailable"; + } + + return str.replace(/\w/, function (char) { + return char.toUpperCase(); }); } -} -function handleError(error) { - alert('Error, check console'); - console.error(error); + function nullfunc(str) { + if (str === "null") { + return "Unavailable"; + } + else { + return str; + } + } + + const type = nullfunc(localStorage.getItem("format")); + const episodes = nullfunc(localStorage.getItem("episodes")); + const duration = nullfunc(localStorage.getItem("duration")); + + let startYear = localStorage.getItem("start year"); + let startMonth = localStorage.getItem("start month"); + let startDay = localStorage.getItem("start day"); + let endYear = localStorage.getItem("end year"); + let endMonth = localStorage.getItem("end month"); + let endDay = localStorage.getItem("end day"); + + if (endDay === "null") { + endDay = "?"; + } + if (endMonth === "null") { + endMonth = "?"; + } + if (endYear === "null") { + endYear = "?"; + } + if (startDay === "null") { + startDay = "?"; + } + if (startMonth === "null") { + startMonth = "?"; + } + if (startYear === "null") { + startYear = "?"; + } + + const statusKey = nullfunc(localStorage.getItem("status")); + const source = nullfunc(localStorage.getItem("source")); + const studios = nullfunc(localStorage.getItem("studios")); + + const aniSeason = capitalizeFirstLetter(localStorage.getItem("season")); + + const animeDetailsDiv = document.getElementById("anime-details-div"); + animeDetailsDiv.innerHTML = + ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type:${type}
Episodes:${episodes}
Duration:${duration} min
Broadcast:${startDay}/${startMonth}/${startYear} to ${endDay}/${endMonth}/${endYear}
Status:${statusKey}
Source:${source}
Studios:${studios}
Season:${aniSeason}
`; + + const score = nullfunc(localStorage.getItem("score")); + const scoredBy = nullfunc(localStorage.getItem("scored by")); + const favourites = nullfunc(localStorage.getItem("favourites")); + const popularity = nullfunc(localStorage.getItem("popularity")); + + + const animeStatsDiv = document.getElementById("anime-stats-div"); + animeStatsDiv.innerHTML = + ` + + + + + + + + + + + + +
Score:${score}% (${scoredBy})
Favourites:#${favourites}
Popularity:#${popularity}
`; + + const relationsDiv = document.getElementById("relations-div"); + const relationTitles = localStorage.getItem("relation titles").split(","); + const relationTypes = localStorage.getItem("relation types").split(","); + const titleIds = localStorage.getItem("relation ids").split(","); + + if (localStorage.getItem("relation types") === "") { + localStorage.removeItem(localStorage.getItem("relation types")); + localStorage.removeItem(localStorage.getItem("relation titles")); + localStorage.removeItem(localStorage.getItem("relation ids")); + relationsDiv.style.display = "none"; + } + else { + const dataLength = Math.min(relationTypes.length, relationTitles.length, titleIds.length); + relationsDiv.innerHTML = ""; + + for (let i = 0; i < dataLength; i++) { + relationsDiv.innerHTML += ` + + + + + +
${JSON.parse(relationTypes[i])}:${relationTitles[i].slice(2, -1)}
`; + } + } + + const titleElements = document.querySelectorAll('#relations-table td:nth-child(2)'); + + for (let i = 0; i < titleElements.length; i++) { + titleElements[i].style.color = "skyblue"; + titleElements[i].classList.add("title-elements"); + + titleElements[i].addEventListener('click', function (event) { + console.log(event.target.id); + const animeTitle = titleElements[i].textContent; + console.log(titleIds[parseInt(event.target.id.slice(-1))]); + + function fetchAnimeData(title) { + var query = ` + query ($title: String) { + Media(search: $title, type: ANIME) { + id + title { + romaji + english + native + } + description + startDate { + year + month + day + } + endDate { + year + month + day + } + season + episodes + relations { + edges { + id + relationType + node { + title { + romaji + english + native + } + } + } + } + duration + format + status + studios { + nodes { + id + name + } + } + genres + source + stats { + scoreDistribution { + amount + } + } + averageScore + popularity + favourites + coverImage { + large + extraLarge + } + bannerImage + } + }`; + + var variables = { + title: title + }; + + var url = 'https://graphql.anilist.co', + options = { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Accept': 'application/json', + }, + body: JSON.stringify({ + query: query, + variables: variables + }) + }; + + fetch(url, options).then(handleResponse) + .then(handleData) + .catch(handleError); + + function handleResponse(response) { + return response.json().then(function (json) { + return response.ok ? json : Promise.reject(json); + }); + } + + function handleData(data) { + console.log(data); + localStorageFunc(data.data.Media); + animeAboutDiv(); + } + + function handleError(error) { + alert('Error, check console'); + console.error(error); + } + } + fetchAnimeData(animeTitle); + }); + } } -fetchTopAnimeData(); document.addEventListener("keypress", function (event) { if (event.key === "Enter") {