https://github.com/bocaletto-luca/anime-explorer

Anime Explorer is a one-page web application that leverages the free Jikan API to help users explore anime data in a rich, interactive format. The app displays results as uniformly sized cards (4 per row, 20 per page) that include key details such as title, score, episode count, and a short synopsis. When you click Leggi di più, a fullscreen ...
https://github.com/bocaletto-luca/anime-explorer

anime anime-database anime-db api application bocaletto-luca css3 free-api html5 javascript open-data opensource responsive webapp

Last synced: 2 months ago
JSON representation

Anime Explorer is a one-page web application that leverages the free Jikan API to help users explore anime data in a rich, interactive format. The app displays results as uniformly sized cards (4 per row, 20 per page) that include key details such as title, score, episode count, and a short synopsis. When you click Leggi di più, a fullscreen ...

• Host: GitHub
• URL: https://github.com/bocaletto-luca/anime-explorer
• Owner: bocaletto-luca
• License: gpl-3.0
• Created: 2025-05-30T15:41:13.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-06-11T14:39:12.000Z (about 1 year ago)
• Last Synced: 2026-03-27T23:42:27.338Z (3 months ago)
• Topics: anime, anime-database, anime-db, api, application, bocaletto-luca, css3, free-api, html5, javascript, open-data, opensource, responsive, webapp
• Language: JavaScript
• Homepage: https://bocaletto-luca.github.io/
• Size: 58.6 KB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Anime Explorer | WebAPP | Free API 

#### Author: Bocaletto Luca

[![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/HTML)

[![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3)](https://developer.mozilla.org/en-US/docs/Web/CSS)

[![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)

[![Bootstrap 5](https://img.shields.io/badge/Bootstrap-7952B3?style=for-the-badge&logo=bootstrap&logoColor=white)](https://getbootstrap.com)

[![Chart.js](https://img.shields.io/badge/Chart.js-FF6384?style=for-the-badge&logo=chart.js&logoColor=white)](https://www.chartjs.org)

[![Jikan API](https://img.shields.io/badge/Jikan_API-0D0D0D?style=for-the-badge)](https://jikan.moe)

[![Online Demo](https://img.shields.io/badge/Online-Demo-blue?style=for-the-badge&logo=google-chrome&logoColor=white)](https://bocaletto-luca.github.io/Anime-Explorer/)

## Description

Anime Explorer is a one-page web application that leverages the free [Jikan API](https://jikan.moe) to help users explore anime data in a rich, interactive format. The app displays results as uniformly sized cards (4 per row, 20 per page) that include key details such as title, score, episode count, and a short synopsis. When you click **Read more...**, a fullscreen modal opens with the anime’s full details—including an image, genres, and a synopsis—and a clear **Close** (Close) button for returning to the list.

This release also includes robust sorting (by score, title, episodes), search functionality, a dynamic chart of the top 10 anime by score (powered by Chart.js), and a theme toggle (Day/Night).

## Features

- **Uniform Grid Layout:** Results are shown as cards in a 4-column grid with pagination (20 results per page).

- **Detailed Modal:** On clicking **Leggi di più**, a fullscreen modal displays additional information and an image, with a **Chiudi** button to close.

- **Sorting Options:** Users can sort anime by score, title, or number of episodes.

- **Search Functionality:** Quickly filter anime via a search box.

- **Dynamic Analytics:** A Chart.js bar chart shows the Top 10 anime by score.

- **Theme Toggle:** Switch between Day and Night themes for a customizable experience.

- **API Integration:** Retrieves up to approximately 400 anime results via Jikan API.

## Technologies Used

- HTML5  

- CSS3  

- JavaScript  

- Bootstrap 5  

- Chart.js  

- [Jikan API](https://jikan.moe)

## Installation & Usage

1. **Clone the repository:**

   ```bash

   git clone https://github.com/bocaletto-luca/anime-explorer.git

2. Start WebServer example Apache2 and open webpage in browser web.

#### Enjoy WebAPP | By Bocaletto Luca