Курсы валют имеют решающее значение для частных лиц и предприятий, участвующих в международных транзакциях. Разместив виджет курсов валют на своем веб-сайте, вы можете предлагать своим пользователям информацию о конвертации валют в режиме реального времени. В этой статье блога мы рассмотрим несколько методов создания виджета курсов валют с примерами кода с использованием JavaScript и HTML. Давайте погрузимся!

Метод 1. Использование стороннего API
Один из самых простых способов создания виджета курсов валют — использование стороннего API, который предоставляет курсы конвертации валюты в режиме реального времени. Вот пример использования API открытых обменных курсов:

// HTML
<div id="exchange-widget"></div>
// JavaScript
const widgetContainer = document.getElementById("exchange-widget");
fetch("https://api.openexchangerates.org/latest")
  .then(response => response.json())
  .then(data => {
    const rates = data.rates;
    const baseCurrency = data.base;
    const widgetHTML = `
      <h2>Exchange Rates Widget</h2>
      <ul>
        <li>${baseCurrency}: 1</li>
        <li>USD: ${rates.USD}</li>
        <li>EUR: ${rates.EUR}</li>
        <li>GBP: ${rates.GBP}</li>
        <li>JPY: ${rates.JPY}</li>
        <!-- Add more currencies as needed -->
      </ul>
    `;
    widgetContainer.innerHTML = widgetHTML;
  })
  .catch(error => {
    console.error("Error fetching exchange rates:", error);
  });

Метод 2: использование пользовательского API
Если у вас есть доступ к данным о конвертации валют или API обменных курсов, вы можете создать собственный API для получения курсов и отображения их в своем виджете. Вот пример использования Node.js и Express:

// Node.js and Express
const express = require("express");
const axios = require("axios");
const app = express();
const port = 3000;
app.get("/exchange-rates", async (req, res) => {
  try {
    const response = await axios.get("https://your-custom-api.com/exchange-rates");
    const rates = response.data;
    res.json(rates);
  } catch (error) {
    console.error("Error fetching exchange rates:", error);
    res.status(500).json({ error: "An error occurred while fetching exchange rates" });
  }
});
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Метод 3: использование библиотеки JavaScript
Некоторые библиотеки JavaScript, такие как ForexJS, предоставляют готовые компоненты для создания виджетов обменных курсов. Эти библиотеки часто содержат настраиваемые стили и дополнительные функции. Вот пример использования ForexJS:

<!-- HTML -->
<div id="exchange-widget"></div>
<!-- JavaScript -->
<script src="https://unpkg.com/forex-js"></script>
<script>
  const widget = new ForexWidget({
    container: document.getElementById("exchange-widget"),
    baseCurrency: "USD",
    currencies: ["USD", "EUR", "GBP", "JPY"] // Add more currencies as needed
  });
  widget.render();
</script>

Создание виджета курсов валют может значительно улучшить взаимодействие с пользователем вашего веб-сайта, предоставляя ценную информацию о конвертации валют в режиме реального времени. Мы изучили несколько методов, включая использование сторонних API, создание пользовательских API и использование библиотек JavaScript. Выберите метод, который лучше всего соответствует вашим требованиям, и начните интегрировать виджет курсов валют на свой сайт уже сегодня!