Resilient-Labs · AngelBelRoth · Oct 6, 2025 · Oct 6, 2025 · Oct 6, 2025 · Nov 10, 2025
diff --git a/README.md b/README.md
@@ -1,22 +1,8 @@
-# 📊 Project: Simple API 1
+# Harry Potter API
+
+Fun project that connects to a Harry Potter-themed APIS to fetch and display data about characters, houses, spells, etc. </br>
+The aim is to explore working with external APIs and building a fan-oriented app around the magical world of Harry Potter.
 
-### Goal: Display data returned from an api
+---
 
-### How to submit your code for review:
-
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
-  - (1 to 5 no 3) I completed the challenge
-  - (1 to 5 no 3) I feel good about my code
-  - Anything specific on which you want feedback!
-
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+<img width="1600" height="783" alt="Screenshot 2025-11-10 at 12 25 48" src="https://github.com/user-attachments/assets/178dd5aa-8fda-484f-806b-1d3eba0d2f32" />
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,41 @@
+* {
+  box-sizing: border-box;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: "Rouge Script", cursive;
+  font-size: 1.3rem;
+  background: black;
+  color: white;
+}
+
+.HogwartsEmblem {
+  display: block;
+  margin: 0 auto;
+  margin-top: 2%;
+  max-width: 20%;
+}
+
+h1{
+  font-size: 2.2rem;
+}
+
+h2{
+  font-size: 1.5rem;
+}
+
+.picture {
+  display: block;
+  border-radius: 10px;
+}
+
+input{
+  background: hsl(148deg 0% 13%);
+  border-radius: 3px;
+}
+
+button {
+  margin: 1%;
+  border-radius: 5px;
+}
diff --git a/img/Griffindor.png b/img/Griffindor.png
diff --git a/img/Hogwarts.png b/img/Hogwarts.png
diff --git a/img/Hufflepuff.png b/img/Hufflepuff.png
diff --git a/img/Ravenclaw.png b/img/Ravenclaw.png
diff --git a/img/Slytherin.png b/img/Slytherin.png
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<meta name="description" content="Harry Potter">
+	<meta name="keywords" content="Harry Potter">
+	<!-- <title>Harry Potter</title> -->
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Rouge+Script&display=swap" rel="stylesheet">
+	<link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+
+	<img src="img/Hogwarts.png" class="HogwartsEmblem" alt="Hogwarts Emblem">
+	<h1>Harry Potter Character & the House</h1>
+	<input type="text" name="" value="">
+	<button type="button" name="button">Check Character</button>
+	<h3 class="fullName"></h3>
+	<img src="" class="picture">
+	<h2></h2>
+
+	<script type="text/javascript" src="js/main.js"></script>
+</body>
+
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,25 @@
+document.querySelector('button').addEventListener('click', checkCharacter)
+
+function checkCharacter() {
+    const character = document.querySelector('input').value
+    const url = `https://potterapi-fedeperin.vercel.app/en/characters?search=${character}`
+
+    fetch(url)
+        .then(res => res.json())
+        .then(data => {
+            console.log(data)
+            document.querySelector("h3").innerText = data[0].fullName;
+            document.querySelector(".picture").src = data[0].image;
+            document.querySelector("h2").innerText = data[0].hogwartsHouse;
+
+            const house = data[0].hogwartsHouse;
+            const urlHouse = `https://hp-api.onrender.com/api/characters/house/${house}`
+            fetch(urlHouse)
+                .then(res => res.json())
+                .then(data => {
+                    console.log(data)
+                })
+        })
+}
+
+//Michael Kazin helped me with these apis