Anime series search engine web application. Individual project developed with Javascript, NodeJs, npm, Gulp, HTML5, CSS3, SASS, Flexbox, BEM, Mixins, transitions, mobile first responsive layout. Clean and tidy code. This was the final assessment exercise of Module 2 at Adalab Bootcamp.
The series search application contains two parts:
. A text field and a button to search for series by their title.
. A list of search results where the series poster and title are displayed.
When you click on the Search button, the application connects to Jikan's open API for searching anime series.
To construct the search URL, the text entered by the user in the search field is collected.
For each series contained in the search result a card is painted where we show an image of the series and the title. Some of the series returned by the API do not have an image. In that case a filler image is displayed.
Once the search results are displayed, the user is able to indicate which are his favorite series. To do this, the following happens when clicking on a series:
The background color and the font color are switched, indicating that it is a favorite series.
A list is displayed on the left side of the screen, below the search form, with the favorite series.
The favorite series continue to appear on the left side of the screen even if the user performs another search.
The list of favorites is stored in the localStorage. So when reloading the page the list of favorites is displayed.
If we perform a new search and a series that is already a favorite comes up, it is already highlighted in the search results (with changed background and text colors).
At the end of the favorites list there is a button to delete all favorites at once.
