برنامه جستجوی انیمیشن خود را با استفاده از Jikan API بسازید

ek3nk4r 2023-07-22

0 58 خواندن این مطلب 3 دقیقه زمان میبرد

برنامه جستجوی انیمیشن خود را با استفاده از Jikan API بسازید

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

در این پست وبلاگ، مراحل گام به گام ساختن اولین صفحه فرود انیمه خود را با استفاده از Jikan Rest API برای شما شرح خواهم داد.

فهرست مطالب

👇 پیش نیازها:

قبل از شروع، مطمئن شوید که درک اولیه ای از HTML، CSS و جاوا اسکریپت Async دارید.

شروع شدن

ادامه دهید و پروژه جدید ما را با استفاده از زمین بازی CodePen تنظیم کنید یا پروژه خود را روی Visual Studio Code با ساختار فایل زیر در زیر پوشه src خود راه اندازی کنید.

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

مرحله 1: HTML

با ویرایش index.html خود شروع کنید و کد زیر را جایگزین آن کنید.

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

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

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

  <script src="script.js"https://dev.to/hr21don/></script>
</body>
</html>

قسمت 2: CSS

مرحله بعدی اضافه کردن سبک های زیر و تکمیل فایل style.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"https://dev.to/hr21don/] {
  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;
}

بخش 3: جاوا اسکریپت

اکنون می توانیم منطق جاوا اسکریپت خود را مانند آن پیاده سازی کنیم.

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

formEl.addEventListener("https://dev.to/hr21don/submit"https://dev.to/hr21don/, 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 = "https://dev.to/hr21don/<p>An error occurred while fetching anime details.</p>"https://dev.to/hr21don/;
  }
})

  function generateAnimeCard(data) {
    return `
      <div class="anime-card">
        <div class="anime-image">
        <img src="https://dev.to/hr21don/${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) + "https://dev.to/hr21don/..."https://dev.to/hr21don/;
    }
    return text;
  }

// simple form submission handling.

const subscribeForm = document.getElementById("https://dev.to/hr21don/subscribe-form"https://dev.to/hr21don/);

subscribeForm.addEventListener("https://dev.to/hr21don/submit"https://dev.to/hr21don/, (event) => {
  event.preventDefault();
  const email = event.target.querySelector("https://dev.to/hr21don/input[type="email"]"https://dev.to/hr21don/).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();
});

نتیجه

تبریک می گویم! شما با موفقیت اولین صفحه فرود انیمه خود را با استفاده از Jikan Rest API ایجاد کردید.

اکنون، می‌توانید ویژگی‌های بیشتری را کاوش کنید، تعامل بیشتری اضافه کنید و به ساخت صفحه فرود خود ادامه دهید تا آن را برای دوستداران انیمه هیجان‌انگیزتر و جذاب‌تر کنید.

کد نویسی مبارک!

ek3nk4r 2023-07-22

0 58 خواندن این مطلب 3 دقیقه زمان میبرد