Build Your Own Anime Search App using Jikan API
Tags: html, css, javascript, programming
Published: 2023-07-22 13:40:01

In this blog post, I'll walk you through the step-by-step process of building your first anime landing page using the [Jikan Rest API](https://docs.api.jikan.moe/).

## 👇 Prerequisites:

Before we get started, make sure you have a basic understanding of HTML, CSS, and Async JavaScript. 

## Getting Started

Go ahead and initialise our new project using the [CodePen playground](https://codepen.io/javascriptdon/full/zYMLNEa) or setup your own project on [Visual Studio Code](https://visualstudio.microsoft.com/) with the following file structure under your src folder.

```
Anime World Starter Files
  |- Assets
    |- CSS
      |- style.css 
    |- JS
      |- script.js
  |- /src
    |- index.html

```

## Step 1: HTML

Start by editing your index.html and replace it with the following code.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Anime Landing Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Banner Section -->
  <header class="banner">
    <h1>Anime World</h1>
    <p>Discover your favorite anime series and movies.</p>
  </header>

  <!-- Featured Anime Section -->
  <section class="featured-anime">
      <form class="search-bar" id="form">
          <input class="search-input" id="search-input" type="search" placeholder="
enter a number between 1 and 100 to search for a series or movie.">
          <button class="search-btn">Search</button> 
      </form>
    <div class="anime-list" id="anime-list">
      <!-- You can add featured anime cards here -->
    </div>
    </div>
  </section>

  <!-- Subscription Form Section -->
  <section class="subscription">
    <h2>Subscribe to Our Newsletter</h2>
    <form id="subscribe-form">
      <input type="email" placeholder="Your Email Address" required>
      <button type="submit">Subscribe</button>
    </form>
  </section>

  <script src="script.js"></script>
</body>
</html>

```

## Part 2: CSS

Next step is to add the following styles and complete our style.css file.

```css
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.anime-title{
    font-size: 1.2rem;
  margin: 10px 0;
}

.movie-title{
    font-size: 1.2rem;
  margin: 10px 0;
}

.banner {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 50px 0;
}

.banner h1 {
  font-size: 3rem;
}

.featured-anime {
  text-align: center;
  padding: 50px 0;
}

.anime-list{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1em;
}

.anime-card{
  padding: 50px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 0 auto;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s;
  display: flex;
  align-items: flex-start;
}

.anime-image {
  margin-right: 20px; /* Add space between the image and text */
}

.anime-img{
  max-width: 200px; 
  height: auto;
  object-fit: cover;
  border-radius: 5px;
}

anime-details {
  flex: 1; /* Expand the details container to fill the remaining space */
}

.anime-title {
  margin-top: 5px;
  font-size: 2rem;
  font-weight: bold;
}

.anime-type {
  margin-top: 15px;
  font-size: 1.5rem;
  color: #888;
}

.anime-description {
  font-size: 2rem;
  margin-top: 25px;
}

.anime-rating{
  font-size: 1.5rem;
  color: #888;

}

/* Styles for hover effect */
.anime-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.anime-card:hover .anime-title,
.anime-card:hover .anime-description {
  opacity: 1;
}

.subscription {
  text-align: center;
  padding: 50px 0;
}

.subscription input[type="email"] {
  padding: 10px;
  border: 1px solid #ddd;
  margin-right: 10px;
}

.subscription button {
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}

.subscription button:hover {
  background-color: #444;
}

.search-bar{
  display: flex;
  justify-content: center;
  transform: translateY(-160%);
  margin-bottom: 1.5em;
}


.search-input{
    color: var(--gray-500, #6B7280);
    padding: 0.6rem .6rem .6rem 3.6rem;
    border: 1px solid #D1D5DB;
    border-radius: 6px 0 0 6px;
    width: 60%;
    height: 38px;
}

.search-btn{
  color: #000;
  border-radius: 0px 6px 6px 0px;
  border: 1px solid var(--gray-300, #D1D5DB);
  background: var(--gray-50, #F9FAFB);  
  width: 20%;
  padding: 9px 11px 9px 17px;
  height: 38px;
  font-weight: 500;
  cursor: pointer;
  
}

.search-btn:hover{
  box-shadow: 1px 1px #A5A5A5;
}

```
## Part 3: JavaScript

Now we can implement our JavaScript logic like so.

```javascript
// JavaScript code can be added here for interactivity or dynamic content.
const animeEl = document.getElementById("anime-list");
const searchEl = document.getElementById("search-input");
const formEl = document.getElementById("form");

formEl.addEventListener('submit', async(e) => {
  // prevent default form behaviour
   e.preventDefault()
  
  let searchString = searchEl.value;
  
  try {
    const res = await fetch(`https://api.jikan.moe/v4/anime/${searchString}`);
    const data = await res.json();

    const truncatedSynopsis = truncateText(data.data.synopsis, 300);
    data.data.synopsis = truncatedSynopsis;
    const animeCardHTML = generateAnimeCard(data);
    animeEl.innerHTML = animeCardHTML;
  } catch (err) {
    console.log(err);
    animeEl.innerHTML = "<p>An error occurred while fetching anime details.</p>";
  }
})

  function generateAnimeCard(data) {
    return `
      <div class="anime-card">
        <div class="anime-image">
        <img src="${data.data.images.jpg.large_image_url}" class="anime-img">
        </div>
        <div class="anime-details">
        <h3 class="anime-title">${data.data.title}</h3>
        <span class="anime-type">${data.data.type}</span>
        <p class="anime-description">${data.data.synopsis}</p>
        <p class="anime-rating">${data.data.rating}</p>
        <p class="anime-year">${data.data.year}</p>
        </div>
      </div>
    `;
  }

//truncate function
  function truncateText(text, maxLength) {
    if (text.length > maxLength) {
      return text.slice(0, maxLength) + "...";
    }
    return text;
  }

// simple form submission handling.

const subscribeForm = document.getElementById("subscribe-form");

subscribeForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const email = event.target.querySelector("input[type='email']").value;
  // You can handle the form submission, e.g., send the email to a server, etc.
  console.log(`Subscribed with email: ${email}`);
  event.target.reset();
});

```

## Conclusion

Congratulations! You have successfully created your first anime landing page using the Jikan Rest API. 

Now, you can explore more features, add more interactivity, and continue building upon your landing page to make it even more exciting and engaging for anime lovers.

Happy Coding!