A Thinkful Front End Web Development Capstone Project by Grayson Gilmore.
Anikunchan enables you to search for your favorite anime characters and then see interesting data about them:
- A portrait
- The character's name, Japanese name and alternate names
- Which anime that character appears in
- Links which provide additional resources
- A summary
- The results of a Google Image search, with the ability to page through additional results
- A similar display of a YouTube search
Particular elements will be hidden if no data are available. Search results are sorted by relevance, and may be redisplayed once hidden.
- This site is entirely browser-side, written in HTML, ES6 Javascript, CSS3, and JQuery.
- Additionally, the site uses:
- Marked to render Markdown in the summary section
- Font Awesome
- Bluebird to polyfill Promises
- Slick for the carousel
- Featherlight for the lightbox
- The main datasource is the Anilist.co API.
- The Javascript fetches an access token (good for one hour) and then does a recursive search using Promises to get every page of results.
- The results are sorted by relevance according to the Strike A Match algorithm.
- It then displays these results to the user, who chooses one. The code then queries the Anilist API for more specific information about that character, including alternate names, summary text in Markdown, and a list of anime the character appears in.
- The list of anime is sorted by air date, and all of this data (where available) is shown to the user.
- Further content is obtained from Google Images (via the Custom Search Engine API) and YouTube and displayed. The user can paginate these results.
- The site is responsive and will stack elements on a smaller screen.
- Implement the ability to search for an anime title and then choose from the characters in that series.
- Due to limitations with Featherlight, Youtube videos are not fully responsive when played; their size is fixed by the width of the window when the search was performed.