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.
๐ 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 or setup your own project on Visual Studio Code 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.
<!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.
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 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!
Top comments (1)
It's great! But this code won't be able to run by itself. There are a few mistakes, like the API URL -:
It's not
https://api.jikan.moe/v4/anime/${searchString},but it should be like this:
https://api.jikan.moe/v4/anime?q=${searchString}.The search string is accepted as the parameter q. Another mistake is that Jikan gives multiple results, not just one. Either you need to traverse through all of them or take out the first one using
data.data[0].I've fixed those small mistakes. Here's a working demo on CodePen:
codepen.io/venkatlohithdasari/pen/...
People can get a taste of your Anime search app with this live demo.
Anyways, amazing work you did there, mate!