It's been a long time since I last wrote a blog post. Lately I have been busy with the blog refactoring and with a bunch of other projects but that's no more. This time we are going to build a quick and cool Anime/Manga search engine application.
We are going to use the MyAnimeList API to pull some useful data out of it. We are also using the API through Rapid API which is a hub allowing us to use APIs and enhancing them with some functionality.
As for MyAnimeList I hope there's no need to introduce this awesome website (づ ᴗ _ᴗ)づ ♡ to you guys.
But enough with the chit-chat, let's get on to coding. This will be a simple project that will be using only HTML, CSS, and Vanilla JS, nothing else but this is pretty powerful stuff on its own.
Open an index.html file and paste the below inside:
For the image assets just download the /assets directory from the github repo. Make sure you copy/paste the directory alongside the html file or the app won't look/work good.
Let's start working on the anime.css file and add the styles. Create the file and paste inside the below:
So apart from some basic formating what we are doing is apply some background to the header element, we center everything in it and then we use the ::after pseudo-selector to style the slightly dark overlay. This is all of course to bring more attention to the lovely づ ᴗ _ᴗ)づ ♡ vocaloids in there!
Let's next add some button styles, just paste them underneath in the css file:
These are simple button styles that will make our buttons look cool and some small utility classes that will help us display everything in a nicer way. Let's next do the main cards with the 4 characters:
The styles for the cards are pretty self explanatory, however I will insist on 2 aspects. The first one is the relative position of the .card class (this allows us to position the .main class images properly) and the same thing happen with the .bg class. Relative containers allow us to position absolute positioned children perfectly inside. You can read more about this here.
The second aspect is the scaleY property which makes the colourful background disappear and shows the underlying search field or button and the translateX property which just moves the images to the right for some nice effect.
Next, let's add the styles for the spinner image and the not found one:
We are basically styling a bit the images and then hiding them. We will be displaying them programatically through our JS file. Next, let's do the series, recommendations and characters classes. These are some utility classes that will display the search results nicely for us:
We are only aligning stuff with flexbox here, if you want to find out more about that, you can read about it here. Apart from that we are just playing around with margin, padding and sizes and changing slightly some hover styles, in order to improve the interactivty of our page.
Finally, after all these styles, let's just add in some media queries for some responsiveness, and we are done with the css part:
We are done with the UI part! Next, let's start on the anime.js file where we will be implementing the interactivity logic and the data fetching. First let's add insite of it a couple of DOM Selectors and some variables:
Don't forget to generate an API key for your project. In order to do that you need to go to this link and generate a new key for you so you can use it inside the application. Apart from that
we are just declaring some variables (the api url and some variables for some typing mechanism we will be implementing).
Let's move on to the search() method. This will be the method we will be using to call the API endpoints:
Our method receives 2 parameters (type which will be a string indicating whether we search for manga or anime - that is because we have different endpoints in the API and query which will be a string to search for - a series title for instance). Our function encodes the query (so we can pass it in the URL) and hits some endpoint. From that endpoint's response we take an id which we use to fetch for the full series information. Once we have that, we call a method named displayData(). Let's add that method too:
This method simply grabs the payload object, checks it and returns its contents mapped as HTML contents (or it shows the not found picture if we get some bad payload). Next, let's test this method. At the bottom of the file add 2 event listeners to call the search() function:
*Note how we are calling clearTimeout and are passing it the reference to the timer variable we set at the very beginning. Also, note that we
are calling the search() method (thus hitting the API endpoint) using setTimeout with a delay of 500 ms. This is because as you probably have noticed we hooked the function onto the "input" event (so every key stroke will trigger a function call and we do not want to hit the API endpoints with too many requests).
Next let's add the getRecommendations() function. This one will hit a different endpoint and fetch us some series recommendations:
And there you have it! You have built a nice and quick front-end project. Hopefully I have stirred your interest into manga, anime and vocaloids with it. If you want to compare your code to mine, you can find it in this repo.
