Skip to content

2004pra/animeRatingWeb

Repository files navigation

🌸 Anime Rating Web

A modern, fast, and responsive anime rating website that displays real-time anime rankings, live search results, and detailed views — all styled in an IMDb-inspired layout. Built with HTML, CSS, and JavaScript, this project fetches data using the Jikan API to show the latest anime details, ratings, creators, and more. Designed to be clean, interactive, and user-friendly.

🚀 Features

  • 🔍 Live Anime Search – Instantly search your favorite anime as you type. Results appear dynamically using real-time API calls.
  • 🌟 Top 20 Anime Rankings – Displays a live-updated list of the top-ranked anime globally.
  • 🧾 Detailed Anime Cards – Hover or click to view anime rating, synopsis, writer, airing details, and more.
  • 🖥️ "Most Popular" Page – A separate page where the left section shows a scrollable list of popular anime, and the right section displays detailed info (rating, writer, story) on the selected anime, with smooth transitions and a dark hover IMDb-style layout.
  • 🎨 Modern UI & Animations – Smooth transitions, clean grid-based layout, soft shadows, rounded cards, and dark overlay hover effects.
  • 📱 Fully Responsive Design – Works flawlessly on desktop, tablet, and mobile.
  • 🧠 Smart Detail Panel – Dynamic detail panel updates based on the selected anime with fade-in transitions and rating badges.

🧰 Tech Stack

  • HTML – Page structure and content
  • CSS – Styling, transitions, and layout
  • JavaScript – Logic for fetching data and updating the DOM
  • Jikan API – Anime data from MyAnimeList (open-source)

🧪 How to Run Locally

  1. Clone the repository:
    git clone https://github.com/2004pra/animeRatingWeb.git
  2. Navigate to the project folder:
    cd animeRatingWeb
  3. Open the project in your browser by double-clicking index.html or running:
    start index.html

🔧 In Progress / Upcoming Features

  • ✅ Separate page for "Most Popular" anime
  • 🔲 Dark Mode toggle
  • 🔲 Genre-based filtering
  • 🔲 Trailer support using YouTube API
  • 🔲 Save favorites using Local Storage

🤝 Contributions Welcome

This project is open-source and beginner-friendly.
Feel free to fork it, improve the UI, fix bugs, or suggest features. PRs are always welcome!

📫 Connect with Me

Made with 💻 by @2004pra
If you liked this project, drop a ⭐ — it really helps and keeps me going!

📜 License

MIT © 2004pra
Free to use, distribute, and modify — just give credit where it's due.

About

The anime info website

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors