Jak wstawić notowania walut na swojego bloga

Oto szczegółowy przewodnik, jak wstawić notowania walut na swoim blogu, z przykładowymi kodami do wklejenia na stronie. W tym przewodniku użyjemy API do pobierania danych o kursach walut i wyświetlimy je na stronie w formacie HTML.

Wymagania

Podstawowa znajomość HTML i JavaScript.
Dostęp do edytora kodu na swoim blogu (np. WordPress, Blogger, lub inny system CMS).

Krok 1: Wybór API do pobierania notowań walut

W tym przykładzie skorzystamy z ExchangeRate API, które oferuje darmowy plan do pobierania danych o kursach walut. Zarejestruj się, aby uzyskać klucz API.

Wejdź na stronę ExchangeRate API.
Zarejestruj się i utwórz konto.
Po zalogowaniu się skopiuj swój klucz API (np. YOUR_API_KEY).

Krok 2: Tworzenie HTML i JavaScript

Oto kod HTML i JavaScript, który możesz wstawić na swoją stronę. Kod ten pobiera dane o kursach walut i wyświetla je w czytelnej formie.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notowania Walut</title>
    <style>
        .currency-widget {
            border: 1px solid #ccc;
            padding: 15px;
            width: 300px;
            margin: 20px auto;
            text-align: center;
            background-color: #f9f9f9;
            border-radius: 5px;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            margin: 5px 0;
            font-weight: bold;
        }
    </style>
</head>
<body>

<div class="currency-widget">
    <h3>Notowania Walut</h3>
    <ul id="currency-list">
        <li>Ładowanie danych...</li>
    </ul>
</div>

<script>
    const apiKey = 'YOUR_API_KEY'; // Wstaw tutaj swój klucz API
    const baseCurrency = 'PLN'; // Waluta bazowa (PLN)
    const targetCurrencies = ['USD', 'EUR', 'GBP']; // Waluty, które chcesz śledzić

    async function fetchExchangeRates() {
        const url = `https://v6.exchangerate-api.com/v6/${apiKey}/latest/${baseCurrency}`;
        
        try {
            const response = await fetch(url);
            const data = await response.json();

            if (data.result === "success") {
                displayRates(data.conversion_rates);
            } else {
                throw new Error(data['error-type']);
            }
        } catch (error) {
            document.getElementById('currency-list').innerHTML = `<li>Błąd: ${error.message}</li>`;
        }
    }

    function displayRates(rates) {
        const listElement = document.getElementById('currency-list');
        listElement.innerHTML = ''; // Czyścimy istniejące dane

        targetCurrencies.forEach(currency => {
            if (rates[currency]) {
                const listItem = document.createElement('li');
                listItem.textContent = `${currency}: ${rates[currency].toFixed(2)}`;
                listElement.appendChild(listItem);
            }
        });
    }

    fetchExchangeRates(); // Wywołanie funkcji przy ładowaniu strony
</script>

</body>
</html>

Krok 3: Wstawienie kodu na bloga

Zaloguj się do swojego bloga (np. WordPress, Blogger).
Utwórz nowy post lub stronę lub edytuj istniejącą.
Przełącz się na edytor HTML, jeśli korzystasz z WYSIWYG (What You See Is What You Get).
Wklej powyższy kod w odpowiednie miejsce.
Zamień YOUR_API_KEY na swój klucz API.
Zapisz zmiany i opublikuj post.

Krok 4: Testowanie

Po opublikowaniu strony odwiedź ją, aby upewnić się, że notowania walut są wyświetlane poprawnie. Jeśli wystąpił błąd, sprawdź konsolę przeglądarki (F12) w zakładce „Konsola” (Console), aby zobaczyć, co może być nie tak.

Dodatkowe informacje

Możesz dostosować styl CSS, aby dopasować wygląd widgetu do reszty swojej strony.
API może mieć limity, więc zapoznaj się z dokumentacją, aby dowiedzieć się więcej o możliwościach i ograniczeniach.
Możesz rozszerzyć listę walut, zmieniając zawartość tablicy targetCurrencies.

Teraz masz pełny kod do wstawienia notowań walut na swoim blogu!