From edb486cccce185a585c3e9050de5be2992c61f5a Mon Sep 17 00:00:00 2001 From: Soham Saha <83546205+Sypher0Dronzer@users.noreply.github.com> Date: Tue, 4 Jun 2024 15:28:48 +0530 Subject: [PATCH] Anilist API has been added --- Existing_API_Collection/Anilist API/README.md | 74 ++++++++++++++++++ .../Anilist API/index.html | 19 +++++ Existing_API_Collection/Anilist API/script.js | 75 +++++++++++++++++++ .../Anilist API/styles.css | 72 ++++++++++++++++++ 4 files changed, 240 insertions(+) create mode 100644 Existing_API_Collection/Anilist API/README.md create mode 100644 Existing_API_Collection/Anilist API/index.html create mode 100644 Existing_API_Collection/Anilist API/script.js create mode 100644 Existing_API_Collection/Anilist API/styles.css diff --git a/Existing_API_Collection/Anilist API/README.md b/Existing_API_Collection/Anilist API/README.md new file mode 100644 index 00000000..de655806 --- /dev/null +++ b/Existing_API_Collection/Anilist API/README.md @@ -0,0 +1,74 @@ +Sure! Below is a sample README file that explains how to use the AniList API: + +--- + +# AniList API + +The AniList API provides access to a wide range of information about anime and manga. This document will guide you through the process of using the API to search for anime titles and retrieve their details. + +## Getting Started + +To use the AniList API, you'll need to obtain an API key by signing up for an AniList account and creating an application. Follow these steps to get started: + +1. **Sign Up**: If you don't already have an account, sign up for an AniList account at [AniList](https://anilist.co). + +2. **Create Application**: Once logged in, go to the [Developer Dashboard](https://anilist.co/settings/developer) and create a new application. This will generate an API key that you'll use to authenticate your requests. + +3. **API Key**: Copy the generated API key. You'll need to include this key in your API requests as an authorization header. + +## Making Requests + +The AniList API uses GraphQL for querying data. Here's an example of how to make a simple request to search for anime titles: + +```graphql +query ($title: String) { + Page { + media (search: $title, type: ANIME) { + id + title { + romaji + english + native + } + description + averageScore + coverImage { + large + medium + } + } + } +} +``` + +This query searches for anime titles matching the provided title string and retrieves their ID, titles in different languages, descriptions, average scores, and cover images. + +## Authentication + +To authenticate your requests, include your API key as an authorization header in your HTTP requests. For example: + +``` +Authorization: Bearer YOUR_API_KEY +``` + +Replace `YOUR_API_KEY` with the API key you obtained from the AniList Developer Dashboard. + +## Rate Limiting + +The AniList API has rate limits to prevent abuse. Be sure to check the [API documentation](https://anilist.gitbook.io/anilist-apiv2-docs/) for the most up-to-date information on rate limits and usage guidelines. + +## Examples + +Check out the provided examples in various programming languages for implementing AniList API requests: + +- [JavaScript](examples/javascript) +- [Python](examples/python) +- [Ruby](examples/ruby) + +## Support + +For help or questions about using the AniList API, you can visit the [AniList API Support](https://anilist.co/forum/section/4) forum. + +--- + +Feel free to customize this README file according to your project's needs! \ No newline at end of file diff --git a/Existing_API_Collection/Anilist API/index.html b/Existing_API_Collection/Anilist API/index.html new file mode 100644 index 00000000..0dc5aa2f --- /dev/null +++ b/Existing_API_Collection/Anilist API/index.html @@ -0,0 +1,19 @@ + + + + + + Anime Search + + + +
+

Anime Search

+ + +
+
+ + + + diff --git a/Existing_API_Collection/Anilist API/script.js b/Existing_API_Collection/Anilist API/script.js new file mode 100644 index 00000000..48a5f78c --- /dev/null +++ b/Existing_API_Collection/Anilist API/script.js @@ -0,0 +1,75 @@ +// Function to search for anime by title +async function searchAnime() { + const title = document.getElementById("searchInput").value; + try { + // Constructing the GraphQL query with image fields + const query = ` + query ($title: String) { + Page { + media (search: $title, type: ANIME) { + id + title { + romaji + english + native + } + description + averageScore + coverImage { + large + medium + } + } + } + } + `; + + // Making a POST request to the AniList API's GraphQL endpoint + const response = await fetch('https://graphql.anilist.co', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + query, + variables: { title } + }), + }); + + // Parsing the JSON response + const responseData = await response.json(); + + // Extracting data from the response + const animeList = responseData.data.Page.media; + + // Displaying results + const animeResultsDiv = document.getElementById("animeResults"); + animeResultsDiv.innerHTML = ""; + animeList.forEach(anime => { + const animeCard = document.createElement("div"); + animeCard.classList.add("anime-card"); + + const titleElement = document.createElement("h2"); + titleElement.textContent = anime.title.romaji || anime.title.english || anime.title.native; + animeCard.appendChild(titleElement); + + const descriptionElement = document.createElement("p"); + descriptionElement.textContent = anime.description; + animeCard.appendChild(descriptionElement); + + const scoreElement = document.createElement("p"); + scoreElement.textContent = "Average Score: " + anime.averageScore; + animeCard.appendChild(scoreElement); + + if (anime.coverImage && anime.coverImage.medium) { + const imageElement = document.createElement("img"); + imageElement.src = anime.coverImage.medium; + animeCard.appendChild(imageElement); + } + + animeResultsDiv.appendChild(animeCard); + }); + } catch (error) { + console.error('Error:', error); + } +} diff --git a/Existing_API_Collection/Anilist API/styles.css b/Existing_API_Collection/Anilist API/styles.css new file mode 100644 index 00000000..04d790cc --- /dev/null +++ b/Existing_API_Collection/Anilist API/styles.css @@ -0,0 +1,72 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f4f4f4; +} + +.container { + max-width: 800px; + margin: 20px auto; + padding: 20px; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +h1 { + font-size: 24px; + margin-bottom: 20px; +} + +#searchInput { + padding: 10px; + width: 70%; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 16px; +} + +button { + padding: 10px 20px; + border: none; + background-color: #007bff; + color: #fff; + border-radius: 4px; + cursor: pointer; + font-size: 16px; +} + +button:hover { + background-color: #0056b3; +} + +#animeResults { + margin-top: 20px; +} + +.anime-card { + border: 1px solid #ddd; + border-radius: 8px; + padding: 20px; + margin-bottom: 20px; + background-color: #f9f9f9; +} + +.anime-card img { + max-width: 100%; + height: auto; + display: block; + margin: 0 auto; + margin-top: 10px; +} + +.anime-card h2 { + font-size: 20px; + margin-bottom: 10px; +} + +.anime-card p { + font-size: 16px; + margin-bottom: 10px; +}