Jak zrobić wskaźnik temperatury na stronę?

Chcesz mieć na swojej stronie internetowej wskaźnik temperatury? Super pomysł! Taki gadżet jest nie tylko funkcjonalny, ale też wygląda ciekawie i może przyciągnąć uwagę odwiedzających. Co więcej, to wcale nie jest takie trudne do zrobienia, jak się wydaje. W tym artykule przeprowadzę Cię krok po kroku przez cały proces, nawet jeśli nie jesteś mistrzem kodowania. Wszystko wyjaśnię prostym językiem, więc spokojnie – poradzisz sobie!

Co będziesz potrzebować?

Zanim zaczniemy, przygotuj kilka rzeczy:

Edytor kodu – Możesz użyć czegoś prostego, jak Notepad++, albo bardziej zaawansowanego, jak Visual Studio Code.
Podstawową wiedzę o HTML, CSS i JavaScript – ale bez paniki, pokażę Ci wszystko od zera.
Konto w serwisie API do pogody – Najpopularniejsze to OpenWeatherMap. To tam będziemy pobierać dane o temperaturze.

Dlaczego wskaźnik temperatury jest przydatny?

Wskaźnik temperatury może przydać się na stronach takich jak blogi podróżnicze, strony związane z ogrodnictwem, sklepy online z odzieżą sezonową czy serwisy informacyjne. Dodaje funkcjonalności i sprawia, że Twoja strona jest bardziej interaktywna.

Krok 1: Stwórz podstawową strukturę HTML

Na początek potrzebujemy prostej strony. Otwórz swój edytor i stwórz plik o nazwie index.html. Oto kod:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Dowiedz się, jak dodać wskaźnik temperatury na stronę internetową.">
    <title>Wskaźnik Temperatury</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Aktualna temperatura</h1>
        <p id="temperature">Ładowanie...</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

Ten kod to szkielet naszej strony. Mamy tytuł, nagłówek i miejsce, gdzie wyświetli się temperatura.

Krok 2: Dodaj styl za pomocą CSS

Aby wskaźnik wyglądał ładnie, dodamy stylizację. Stwórz plik o nazwie style.css i wrzuć do niego poniższy kod:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f8ff;
    color: #333;
    text-align: center;
    padding: 20px;
}

.container {
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 300px;
}

h1 {
    font-size: 24px;
    color: #007BFF;
}

#temperature {
    font-size: 20px;
    font-weight: bold;
    color: #FF5733;
}

Ten kod sprawia, że strona wygląda schludnie i estetycznie. Stylizacja podkreśla elementy takie jak nagłówek i temperatura.

Krok 3: Pobierz dane z API

Teraz czas na magię! Potrzebujemy JavaScriptu, aby połączyć się z serwisem API i pobrać aktualną temperaturę.

Stwórz plik script.js i dodaj ten kod:

const apiKey = "TWOJ_KLUCZ_API"; // Wklej tutaj swój klucz API z OpenWeatherMap
const city = "Warsaw"; // Podaj nazwę miasta
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}`;

async function fetchTemperature() {
    try {
        const response = await fetch(apiUrl);
        if (!response.ok) {
            throw new Error(`Błąd: ${response.status}`);
        }
        const data = await response.json();
        const temperature = data.main.temp;
        document.getElementById("temperature").textContent = `${temperature}°C`;
    } catch (error) {
        document.getElementById("temperature").textContent = "Nie udało się pobrać danych.";
        console.error(error);
    }
}

fetchTemperature();

Wyjaśnienie kodu:

apiKey – Wymaga rejestracji w serwisie OpenWeatherMap, aby otrzymać klucz API.
city – Możesz zmienić nazwę miasta na dowolne.
fetch() – Pobiera dane z API.
try…catch – Zapewnia obsługę błędów, na wypadek problemów z połączeniem.

Krok 4: Zarejestruj się w serwisie OpenWeatherMap

Jeśli jeszcze tego nie zrobiłeś, przejdź na stronę OpenWeatherMap i załóż konto. Po rejestracji wygeneruj klucz API w sekcji „API keys”. Ten klucz wklej do zmiennej apiKey w pliku script.js.

Krok 5: Testowanie strony

Otwórz swój plik index.html w przeglądarce. Jeśli wszystko poszło zgodnie z planem, zobaczysz aktualną temperaturę w wybranym mieście! 🎉

Dodatkowe ulepszenia

Dodaj więcej miast – Możesz dodać rozwijaną listę, z której użytkownik wybiera miasto.
Stylizacja dynamiczna – Zmień kolor tekstu w zależności od temperatury (np. czerwony dla ciepła, niebieski dla zimna).
Automatyczna lokalizacja – Wykorzystaj geolokalizację użytkownika, aby pobrać temperaturę w jego okolicy.

Oto przykład kodu do geolokalizacji:

navigator.geolocation.getCurrentPosition(async (position) => {
    const lat = position.coords.latitude;
    const lon = position.coords.longitude;
    const apiUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&units=metric&appid=${apiKey}`;
    
    try {
        const response = await fetch(apiUrl);
        const data = await response.json();
        const temperature = data.main.temp;
        document.getElementById("temperature").textContent = `${temperature}°C`;
    } catch (error) {
        document.getElementById("temperature").textContent = "Nie udało się pobrać danych.";
        console.error(error);
    }
});

Zrobienie wskaźnika temperatury na stronę to świetna zabawa i szansa na rozwinięcie swoich umiejętności. Teraz masz działający przykład, który możesz dowolnie rozwijać. Wystarczy trochę kreatywności, a Twoja strona stanie się jeszcze bardziej interesująca. Powodzenia!