apna-college · Muhammad-Jabir · Mar 28, 2026
diff --git a/PotterDB/README.md b/PotterDB/README.md
@@ -0,0 +1,21 @@
+## Potter DB Search Application
+A simple web application for searching Harry Potter characters, spells, and other magical data using the Potter DB API.
+
+Potter DB Search is a lightweight, client-side web application that integrates with the public Potter DB API to search and display Harry Potter universe data. The application features a simple interface with real-time API integration using modern JavaScript.
+
+# Sample Workflow
+1. Open index.html
+2. Type "/characters"
+3. Click Search
+4. Press F12 → Console
+5. View character array
+
+# Example Searches
+/v1/movies                 "To search movies of Harry Potter"
+/v1/movies/{id}            "To search movies of Harry Potter with specificly by thier id"
+/v1/portion                "To search potions of Harry Potter"
+/v1/portion/{id}           "To search potions of Harry Potter with specificly by their id"
+/v1/spells                 "To search spells of Harry Potter"
+/v1/spells/{id}            "To search spells of Harry Potter with specificly by their id"
+/v1/book                   "To search books of Harry Potter"
+/v1/book/{id}              "To search books of Harry Potter with specidicly by their id"
diff --git a/PotterDB/app.js b/PotterDB/app.js
@@ -0,0 +1,17 @@
+let url = "https://api.potterdb.com";
+
+let inp = document.querySelector('input');
+let btn = document.querySelector('button');
+let div = document.querySelector('div');
+
+btn.addEventListener('click',async ()=>{
+    let res = inp.value;
+    const url2 = url+res;
+    let str = await fetch(url2);
+    let con =  await str.json();
+    console.log(con.data);
+    for (let arr of con.data) {
+        console.log(arr);
+    }
+    inp.value = "";
+});
diff --git a/PotterDB/index.html b/PotterDB/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Potter DB</title>
+</head>
+<body>
+    <script src="https://cdn.jsdelivr.net/npm/axios@1.13.2/dist/axios.min.js"></script>
+    <input type="text" placeholder="Search">
+    <button>Search</button>
+    <div></div>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/PotterDB/style.css b/PotterDB/style.css