Merge pull request #240 from Sypher0Dronzer/AnilistAPI

Anilist API has been added
dishamodi0910 · Jul 20, 2024 · b9252a5 · b9252a5
2 parents 4015385 + edb486c
commit b9252a5
Show file tree

Hide file tree

Showing 4 changed files with 240 additions and 0 deletions.
diff --git a/Existing_API_Collection/Anilist API/README.md 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!
diff --git a/Existing_API_Collection/Anilist API/index.html b/Existing_API_Collection/Anilist API/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Anime Search</title>
+ <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+ <div class="container">
+ <h1>Anime Search</h1>
+ <input type="text" id="searchInput" placeholder="Search for anime...">
+ <button onclick="searchAnime()">Search</button>
+ <div id="animeResults"></div>
+ </div>
+
+ <script src="script.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/Anilist API/script.js 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
@@ -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;
+}