JSFiddle - React, Tailwind, and code Playground

by rga4

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Albion Online Prices</title>
</head>
<body>
  <h1>Albion Online Prices</h1>
  <form action="/" method="post">
    <input type="text" name="items" placeholder="Вещи">
    <input type="text" name="locations" placeholder="Локации">
    <input type="text" name="qualities" placeholder="Качество">
    <button type="submit">Обновить</button>
  </form>
  <table>
    <thead>
      <tr>
        <th>Вещь</th>
        <th>Локация</th>
        <th>Качество</th>
        <th>Цена продажи (минимум)</th>
        <th>Цена продажи (максимум)</th>
        <th>Цена покупки (минимум)</th>
        <th>Цена покупки (максимум)</th>
      </tr>
    </thead>
    <tbody>
      </tbody>
  </table>
</body>
</html>

JavaScript

// Инициализация переменных
const items = document.querySelector('input[name="items"]');
const locations = document.querySelector('input[name="locations"]');
const qualities = document.querySelector('input[name="qualities"]');
const table = document.querySelector('table');

// Функция обработки запроса
function getData() {
  // Формируем URL-адрес запроса
  const url = `https://west.albion-online-data.com/api/v2/stats/prices/${items.value}?locations=${locations.value}&qualities=${qualities.value}`;


  // Отправляем запрос
  fetch(url)
    .then(response => response.json())
    .then(data => {
      // Обновляем таблицу данными из запроса
      table.innerHTML = '';
      for (const item of data) {
        table.innerHTML += `
          <tr>
            <td>${item.item_id}</td>
            <td>${item.city}</td>
            <td>${item.quality}</td>
            <td>${item.sell_price_min}</td>
            <td>${item.sell_price_max}</td>
            <td>${item.buy_price_min}</td>
            <td>${item.buy_price_max}</td>
          </tr>
        `;
      }
    });
}

// Обработка нажатия кнопки
document.querySelector('button').addEventListener('click', getData);