Miawwh/anidice
π² AniDice is a simple web app that shows random anime images based on selected tags like catgirl or foxgirl. Built with HTML, CSS, Bootstrap, and JavaScript, using the NekoSi Cat API.
π² AniDice
A simple and beginner-friendly mini project that allows users to view and download anime images based on selected tags. For example, when a user selects the catgirl tag, the app will display random images of catgirls, along with related tags and a download button
π Live Preview
You can check out the project here
Or clone the repo and open it locally (see below)
πΈ Screenshot
π§° Technologies Used
- HTML
- CSS
- BootstrapΒ 5
- JavaScript
- Axios (orΒ Fetch API) for fetching anime images
π¦ How to Use
-
Clone this repository:
git clone https://github.com/Miawwh/tagami.git
-
Open the project folder:
cd tagami -
Open
index.htmlin your browser:# You can simply double-click index.html or use Live Server (VS Code) -
Select an anime tag from the dropdown (e.g.,
catgirl) and click the Search button. The app will fetch and display a random anime image for that tag, along with a download option
π§ͺ API Used
This project uses the free and public API provided by NekoSi Cat for anime image retrieval
- π API Endpoint Used:
https://api.nekosia.cat/api/v1/images/tags - π API Documentation: NekoSi Cat API Docs
ποΈ Project Structure
tagami/
βββ index.html # Main HTML file
βββ style.css # Custom styling
βββ system.js # JavaScript logic (API call, rendering results)
βββ Defaul.png # Sample screenshot
βββ image.png # Sample screenshot
βββ README.md # Project documentation
π£ Notes
- This project is completely free and open to use by anyone
- Youβre welcome to improve, modify, or reuse this code for your own personal or educational projects
- If the API server is down or encounters an error, an appropriate message will be shown
π‘ Future Improvements (Optional Ideas)
- Add pagination or multiple-image gallery per tag
- Display additional tag suggestions based on user choices
- Implement dark/light mode toggle
- Improve mobile responsiveness and accessibility
π¬ Feedback or Questions?
Feel free to open an issue or start a discussion on this repo
