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;
+}