Welcome to the Hogwarts Wiki, an immersive and interactive web experience for all fans of the wizarding world. This project brings the magic of Harry Potter to life with dynamic content, stunning visuals, and a host of hidden interactive easter eggs.
This website serves as a dynamic portal to the world of Harry Potter, fetching and displaying detailed information about the books, characters, houses, and spells. The goal was to create not just an informational site, but a magical experience, complete with ambient music, themed visuals, and interactive elements that make the user feel like they are casting spells and exploring the castle themselves.
- Fully Responsive Design: A seamless experience on desktops, tablets, and mobile devices.
- Dynamic Content: All information for Books, Characters, Houses, and Spells is loaded dynamically from a dedicated API.
- Immersive Atmosphere:
- A full-screen video background on the homepage.
- Persistent background music with a sound toggle, remembering your choice across pages.
- A custom mouse cursor that leaves a trail of wand sparkles.
- An ambient, floating magical runes effect on every page.
- Interactive Easter Eggs: A collection of hidden magical features to discover (see guide below!).
- Themed Experiences: The entire look and feel of the site can be changed by interacting with the Sorting Hat or the Polyjuice Potion.
- HTML5: For the core structure and content.
- CSS3: For all styling, including complex animations, flexbox/grid layouts, and responsive design.
- Vanilla JavaScript (ES6+): For all interactivity, DOM manipulation,
async/awaitfor data fetching, and easter egg logic.
This site is filled with hidden magic! Here’s how to find it:
-
🔮 Polyjuice Potion: See that potion bottle (
🧪) in the bottom-left corner? Click it three times to transform the website's theme into that of another character. Click again to cycle through or reset. -
💡 Lumos & Nox: Need some light? Just type
lumoson your keyboard to illuminate the area around your cursor. Typenoxto turn the light off. -
🎩 The Sorting Ceremony: Are you brave, wise, loyal, or ambitious? Type
sortmeon your keyboard (or click the hat icon in the bottom-right on mobile) to take the Sorting Hat quiz and be sorted into your Hogwarts house, which will change the site's theme to match! -
🌟 The Golden Snitch: Be quick! A Golden Snitch will occasionally fly across the screen. Click it before it disappears to catch it!
No complex setup is required! To run this project locally:
- Clone the repository:
git clone https://github.com/choppanitheesh/HarryPotterWiki.git
- Navigate to the project directory:
cd HarryPotterWiki - Open the
index.htmlfile in your favorite web browser.
This project was a magical journey, and it wouldn't have been possible without the help of some fantastic resources and tools.
-
PotterAPI: All of the wonderful data about the wizarding world is provided by the PotterAPI by fedeperin. A huge thank you to its creator for making this data so easily accessible to fans and developers.
-
AI Assistants: A special thank you to the AI assistants that helped in brainstorming ideas, debugging complex code, and implementing features. This project was developed with the help of:
- Google's Gemini
- OpenAI's ChatGPT