باز کردن قفل 650+ پوکمون در 5 مرحله: فهرست رویای خود را با جاوا اسکریپت Vanilla بسازید

با آخرین پروژه ما آماده شوید تا همه آنها را بدست آورید: ایجاد یک فهرست پوکمون با استفاده از Pokémon API و وانیلی جاوا اسکریپت. برای شروع کار، بیایید اهداف پروژه خود را تعریف کنیم. ما یک نوار جستجوی کاربرپسند ایجاد خواهیم کرد که در آن کاربران می توانند به دنبال پوکمون مورد علاقه خود بگردند و وقتی جستجو می کنند، تصویر و آمار پوکمون در نتایج نمایش داده می شود. اگرچه عملکرد ساده است، این پروژه به عنوان یک پایه عالی برای سفارشی سازی و افزودن به نمونه کارها شما عمل می کند. همچنین می توانید پروژه های بیشتری مانند این را در t8tech.com کاوش کنید.

نسخه کامل این پروژه را در https://poke-mon.now.sh/ ببینید.

این پروژه از Chris on Code الهام گرفته است.

راه اندازی بنیاد HTML

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

این فایل HTML پایه دارای یک div خالی با کلاس “pokemon-container” و یک فرم با نوار جستجو و یک دکمه در بالای آن است. ما از div خالی برای نمایش داده های پوکمون از فایل جاوا اسکریپت خود استفاده می کنیم.

اضافه کردن یک لمس از سبک

صفحه وب ما در این مرحله کمی کسل کننده به نظر می رسد، بنابراین بیایید کمی استعداد بصری اضافه کنیم. ما یک را ایجاد خواهیم کرد style.css فایل و آن را به ما پیوند دهید index.html فایل

@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

body {
  padding: 30px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url("https://i.imgur.com/zwp2EXP.png") center top;
  background-color: #41740e;
  background-repeat: repeat-x;
  background-size: contain;
  font-family: "Press Start 2P";
  position: relative;
}

form {
  background: #ef5350;
  position: fixed;
  display: flex;
  justify-content: center;
  padding: 10px;
  top: 0;
  left: 0;
  right: 0;
}

form input {
  border: none;
  outline: none;
  border-radius: 20px;
  font-size: 18px;
  padding: 12px 20px;
}

form input[type="text"] {
  background: rgba(255, 254, 254, 0.7);
  min-width: 300px;
  max-width: 100%;
}

form input[type="submit"] {
  cursor: pointer;
  margin-left: 8px;
  background: #c62828;
  color: #f0d0d0;
}

.pokemon {
  text-align: center;
}

h2 {
  text-transform: capitalize;
}

.stats {
  font-size: 14px;
}

فقط برای بحث در مورد CSS یک پست دیگر لازم است، بنابراین اجازه دهید به سمت جاوا اسکریپت کارها برویم.

جاوا اسکریپت

بنابراین بیایید اکنون مقداری جاوا اسکریپت کدنویسی کنیم. ما با یک خالی شروع خواهیم کرد index.js پرونده و مراحل مورد نیاز را مورد بحث قرار دهید.

1. چیزهایی را که نیاز داریم از HTML در index.js بگیرید.
2. ورودی را از نوار جستجو بگیرید و از آن برای درخواست API استفاده کنید.
3. به Pokemon API درخواست دهید و داده ها را واکشی کنید.
4. نمایش داده ها در صفحه وب

خوب، این مراحل خواهند بود، به نظر ساده می رسد، اینطور نیست.

اولین قدم این است که تمام div ها، فرم ها و غیره را از فایل HTML دریافت کنید که به صورت زیر انجام می شود.

// grab the things we need ----------
const pokemonContainer = document.querySelector(".pokemon-container");
const formEl = document.querySelector("form");
const inputEl = document.querySelector("input[type=text]");

وقتی نوبت به شناسایی عناصر می رسد، این گزینه را داریم که از یکی از آنها استفاده کنیم getElementById() یا getElementByClass() روش‌هایی که هر دوی آنها نتایج یکسانی در این سناریوی خاص دارند.

در مرحله بعد، شنوندگان رویداد را برای ثبت رویداد ارسالی پیوست خواهیم کرد.

// listen for user events -------------
formEl.addEventListener("submit", (e) => {
  e.preventDefault();
  pokemonContainer.innerHTML = "";
  getPokemon(inputEl.value);
});

در این قطعه کد، ما اهرم می کنیم e.preventDefault() برای جلوگیری از بارگذاری مجدد صفحه سپس محتویات را پاک می کنیم pokemonContainer div، که ممکن است نتایج جستجوی قبلی را در آینده نگه دارد. در نهایت، ما را فراخوانی می کنیم getPokemon() تابع، ورودی جستجو را به عنوان آرگومان ارسال می کند. این تابع مسئول رسیدگی به همه چیز از ارسال درخواست های API تا نمایش نتایج در صفحه است، بنابراین بیایید پیچیدگی های آن را بررسی کنیم.

مرحله سوم شامل ارسال درخواست‌ها به API Pokémon است که در https://pokeapi.co/api/v2/pokemon/ قابل دسترسی است و به دنبال آن شناسه منحصربه‌فرد Pokémon ارسال می‌شود.

برای رسیدن به این هدف، یک تابع ناهمزمان ایجاد خواهیم کرد، همانطور که در زیر نشان داده شده است:

async function getPokemon(name = "bulbasaur") {
  const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${name}`);
  const pokemon = await res.json();
}

ساخت یک رابط پوکمون پویا با توابع ناهمزمان

در این تصویر، ما به یک تابع ناهمزمان ساده که به عنوان معروف است، می پردازیم getPokemon()، که از Fetch API برای ارسال درخواست ها و ذخیره پاسخ ها در آن استفاده می کند res متغیر سپس پاسخ با استفاده از فرمت JSON تجزیه می شود json() روش

یکی از جنبه های قابل توجه این عملکرد ظرفیت آن برای نمایش یک پوکمون پیش فرض قبل از شروع جستجو است. این با اضافه کردن یک به دست می آید name پارامتر، مانند name = bulbasaur، به تابع. علاوه بر این، کاربران می توانند پوکمون های خاصی را با نام جستجو کنند.

مهم است که توجه داشته باشید که API فقط نام پوکمون های کوچک را معتبر می داند. برای تطبیق با این موضوع، می توانید به صورت اختیاری یک روش یا تابع برای تبدیل ورودی کاربر به حروف کوچک ایجاد کنید.

زمانی که اطلاعات پوکمون را به دست آوردیم و در آن ذخیره کردیم res متغیر، اجازه دهید یک پاسخ API سنتی را بررسی کنیم. با توجه به حجم گسترده پاسخ JSON، توصیه می کنیم برای مشاهده فایل خام به https://pokeapi.co/ مراجعه کنید.

اکنون که داده‌های پوکمون را داریم، بیایید یک div جداگانه برای نمایش اطلاعات ایجاد کنیم. ما با ایجاد یک عنصر div جدید با استفاده از document.createElement("div") و به آن یک کلاس از pokemon با classList.add("pokemon").

const pokemonEl = document.createElement("div");
pokemonEl.classList.add("pokemon");

ما با نمایش تصویر پوکمون شروع می کنیم .innerHTML و appendChild() برای الحاق داده ها به صفحه وب به یاد داشته باشید که همه این عملیات در داخل انجام می شود getPokemon() تابع

pokemonEl.innerHTML = `


${pokemon.name}

`
pokemonContainer.appendChild(pokemonEl);

ارائه جزئیات پوکمون

ما از ویژگی “innerHTML” در عنصر “pokemonEl” استفاده کردیم و آن را با Template Literals ترکیب کردیم تا به صورت پویا HTML را تزریق کنیم. این رویکرد ما را قادر می‌سازد یک «div» با یک کلاس «info» ایجاد کنیم و آن را با داده‌های مورد نظر پر کنیم.

مرحله بعدی شامل جداسازی اطلاعات مربوطه در پاسخ JSON و تعیین انتخابی این است که چه چیزی در برنامه ما نمایش داده شود. با توجه به حجم قابل توجهی از فایل های پاسخ، بسیار مهم است که در مورد کمیت و نوع داده هایی که می خواهیم به نمایش بگذاریم احتیاط کنیم.

از نظر تصویر پوکمون، ما می توانیم به سادگی با تغییر “id” در “pokemon.id}.png” به همه آنها دسترسی داشته باشیم. سپس نام پوکمون با استفاده از یک ` نمایش داده می شود

عنوان در نهایت، “div” را با استفاده از “pokemonContainer.appendChild(pokemonEl)” به صفحه وب اضافه می کنیم و اطلاعات را برای کاربر قابل مشاهده می کنیم.

کاوش عمیق در اطلاعات پوکمون

در این مرحله، می‌توانیم نام و تصویر پوکمون را با موفقیت نمایش دهیم. با این حال، تعداد زیادی اطلاعات اضافی وجود دارد که می توانیم ارائه دهیم، بنابراین بیایید ادامه دهیم.

گام بعدی ما نمایش آمار پوکمون خواهد بود. ما می توانیم از طریق پاسخ با استفاده از «pokemon.stats» به این آمار دسترسی داشته باشیم. قبل از انجام این کار، اجازه دهید نگاهی دقیق‌تر به داده‌های خام JSON برای آمار بیندازیم. در زیر، آمار Bulbasaur را خواهید دید:

 "stats": [
    {
      "base_stat": 45,
      "effort": 0,
      "stat": {
        "name": "speed",
        "url": "https://pokeapi.co/api/v2/stat/6/"
      }
    },
    {
      "base_stat": 65,
      "effort": 0,
      "stat": {
        "name": "special-defense",
        "url": "https://pokeapi.co/api/v2/stat/5/"
      }
    },
    {
      "base_stat": 65,
      "effort": 1,
      "stat": {
        "name": "special-attack",
        "url": "https://pokeapi.co/api/v2/stat/4/"
      }
    },
    {
      "base_stat": 49,
      "effort": 0,
      "stat": {
        "name": "defense",
        "url": "https://pokeapi.co/api/v2/stat/3/"
      }
    },
    {
      "base_stat": 49,
      "effort": 0,
      "stat": {
        "name": "attack",
        "url": "https://pokeapi.co/api/v2/stat/2/"
      }
    },
    {
      "base_stat": 45,
      "effort": 0,
      "stat": {
        "name": "hp",
        "url": "https://pokeapi.co/api/v2/stat/1/"
      }
    }
  ],

بنابراین، اکنون باید تصمیم بگیریم که چه چیزی را می خواهیم نمایش دهیم. این کاملاً به شما بستگی دارد، می توانید همه چیز را نشان دهید یا هیچ چیز. در اینجا نام stat و مقدار عددی آن را نمایش خواهیم داد

base_stat

${pokemon.stats.map((stat) => {