Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

added PotterAPI #200

Closed
wants to merge 2 commits into from
Closed

added PotterAPI #200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d169fbd
add PotterAPI
DonaldReddy Jun 1, 2024
46552b6
Merge branch 'master' into potterAPI
DonaldReddy Jun 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions Existing_API_Collection/PotterAPI/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# PotterAPI

## Overview
PotterAPI is a Harry Potter API developed with Express.js and available in multiple languages.
This API stores information and images of books, characters, and spells. It provides a way to search for books, characters, and spells based on various criteria such as keywords, or id. The API returns detailed metadata and can include additional features such as image URLs for each character.

## Key Features
- **Characters**: Get Information of all characters of Harry Potter World.
- **Houses**: Details about Houses in Hogwarts.
- **Spells**: Information about the spells.
- **Books**: Get information about Books written on Harry Potter.

## Installation
To use the PotterAPI,
clone the repository
run index.html
26 changes: 26 additions & 0 deletions Existing_API_Collection/PotterAPI/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>

<body>

<div id="container">

<section id="section_1">
<h1>Characters of Harry Potter 🧙‍♂️</h1>
<div id="characters">
</div>
</section>

</div>

<script src="./script.js"></script>
</body>

</html>
51 changes: 51 additions & 0 deletions Existing_API_Collection/PotterAPI/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@

const characters = document.getElementById("characters");

function addCharacter(char) {

const div = document.createElement("div");
div.classList.add("card");

const img = document.createElement("img");
img.setAttribute("src", char.image)

const h2 = document.createElement("h2")
h2.innerText = char.fullName;

const h3 = document.createElement("h3")
h3.innerText = char.hogwartsHouse;

div.appendChild(img)
div.appendChild(h2)
div.appendChild(h3)
characters.appendChild(div);
}


async function fetchCharacters() {

try {

const response = await (await fetch("https://potterapi-fedeperin.vercel.app/es/characters")).json()

for (let item of response) {
addCharacter(item);
}

} catch (error) {
console.log(error.message);
}


}


document.addEventListener("DOMContentLoaded", fetchCharacters)








48 changes: 48 additions & 0 deletions Existing_API_Collection/PotterAPI/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
* {
margin: 0;
padding: 0;
}

#container {
height: 100vh;
min-height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
background: #000000d2;
color: white;
}

#section_1 {
height: 90%;
width: 90%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 50px;
}

#characters {
height: 90%;
width: 90%;
overflow-y: auto;
border: 1px solid white;
display: flex;
flex-wrap: wrap;
}

.card {
height: 300px;
width: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.card img {
width: 150px;
border-radius: 50%;
}
3 changes: 2 additions & 1 deletion Existing_API_Collection/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,6 @@
|[JSON_Placeholder_API](./JSON_Plaeholder_API/)| this api is used to test basic crud operations on fake data posts |
|[Gold Silver Price](./Gold,silver_price_API/)|This API helps you check realtime price of gold and silver for each categories |
|[GeoAPI](./GeoAPI/)| GeoAPI is a simple RESTful API that allows you to convert addresses to geographic coordinates (latitude and longitude) and vice versa. This API is built using Node.js and Express.|
|[PotterAPI](./PotterAPI/)|PotterAPI is a Harry Potter API developed with Express.js and available in multiple languages.This API stores information and images of books, characters, and spells. It provides a way to search for books, characters, and spells|
|[Books API](./Books_API/)| The Google Books API allows developers to access a wealth of information about books, including their titles, authors, publishers, publication dates, and descriptions. |
|[Currency Converter API](./Currency_Converter_API/)| Currency_Converter is a simple RESTful API that allows you to convert currency values to different currency|
|[Currency Converter API](./Currency_Converter_API/)| Currency_Converter is a simple RESTful API that allows you to convert currency values to different currency|
Loading