Spis treści

Aplikacja pogodowa
⚠️ Ważne Informacje
🎯 Główne Funkcje
📖 Jak Używać Aplikacji
📊 Dane Meteorologiczne w Aplikacji
🌬️ Jakość Powietrza – Szczegółowe Parametry
🔥 Indeks Grillowy – Jak Działa?
🌙 Fazy Księżyca
🗺️ Mapa Pogodowa
🌟 Ciekawostki o Pogodzie
🔧 Wymagania Techniczne
Jak wstawić pogodę na własną stronę?

Jak zbudować aplikację pogodową na 5 dni

Kompleksowe narzędzie do sprawdzania pogody, jakości powietrza i warunków atmosferycznych

Pogoda

Aplikacja pogodowa

Zaawansowana Aplikacja Pogodowa to nowoczesne, w pełni responsywne narzędzie, które łączy w sobie tradycyjne dane pogodowe z zaawansowanymi funkcjami takimi jak mapa pogodowa, szczegółowa analiza jakości powietrza, indeks grillowy czy faza księżyca. Korzysta z OpenWeatherMap API oraz Leaflet.js, zapewniając dokładne i aktualne informacje meteorologiczne w atrakcyjnej wizualnie formie z dynamicznymi tłami i animacjami.

🌤️ Wprowadź Miasto

°C / m/s °F / mph

Pobieranie danych pogodowych...

_______

__°

🔥 Indeks grillowy: --

_______

🌑 --

Odczuwalna__°

Wilgotność__%

Wiatr__

Ciśnienie__ hPa

Widoczność__ km

Wschód / Zachód__ / __

Jakość powietrza__

🌬️

Stan Powietrza

Szczegółowe stężenia zanieczyszczeń w Twojej okolicy

PM2.5

Najgroźniejszy pył – wnika głęboko do płuc i krwi

PM10

Pył z dróg, kominów i budów – drażni drogi oddechowe

O₃ Ozon

Powstaje w słoneczne dni – szkodzi płucom i oczom

NO₂

Głównie ze spalin samochodowych – powoduje kaszel

SO₂

Ze spalania węgla – podrażnia gardło i oczy

Tlenek węgla – toksyczny gaz z pieców i aut

⚠️ Ważne Informacje

🔑 Klucz API
Aplikacja używa klucza API OpenWeatherMap. W wersji produkcyjnej zaleca się ukrycie klucza za własnym backendem (proxy), aby zapobiec jego nadużywaniu.

📍 Geolokalizacja
Funkcja geolokalizacji wymaga zezwolenia użytkownika w przeglądarce. Jeśli użytkownik odmówi dostępu, należy ręcznie wprowadzić nazwę miasta.

🗺️ Mapa
Mapa wymaga połączenia z internetem do załadowania kafelków. Nakładki pogodowe są aktualizowane co 10-15 minut przez OpenWeatherMap.

🎯 Główne Funkcje

🌡️ Aktualna Pogoda

Temperatura, odczuwalna temperatura, wilgotność, ciśnienie, widoczność, wiatr

📅 Prognoza 5 Dni

Szczegółowa prognoza z temperaturą, wiatrem, wilgotnością i prawdopodobieństwem opadów

🗺️ Mapa Pogodowa

Interaktywna mapa z nakładkami chmur i opadów w czasie rzeczywistym

🌬️ Jakość Powietrza

Szczegółowe stężenia PM2.5, PM10, O3, NO2, SO2, CO z opisami

🔥 Indeks Grillowy

Inteligentna ocena warunków do grillowania na podstawie pogody

🌙 Faza Księżyca

Aktualna faza księżyca z ikoną i nazwą po polsku

🎨 Dynamiczne Tła

Zmiana tła aplikacji w zależności od pogody (słonecznie, deszcz, śnieg, noc)

✨ Animacje

Unoszące się ikony pogodowe i płynne przejścia CSS

- Wyszukiwanie miast – autocomplete z podpowiedziami podczas wpisywania
- Geolokalizacja – automatyczne wykrywanie Twojej lokalizacji
- Wschód i zachód słońca – dokładne godziny dla danej lokalizacji
- Przełącznik jednostek – °C/°F oraz m/s/mph
- Responsywny design – działa na komputerach, tabletach i telefonach
- Język polski – wszystkie opisy pogodowe w języku polskim
- Szybkie działanie – równoczesne pobieranie danych (Promise.all)

📖 Jak Używać Aplikacji

1. Wprowadź nazwę miasta – wpisz nazwę miejscowości w pole wyszukiwania (np. „Łódź”, „Warszawa”, „Tokio”). Aplikacja podpowie Ci dostępne miasta podczas pisania.
2. Kliknij „Szukaj” lub naciśnij Enter – aplikacja pobierze aktualne dane pogodowe, jakość powietrza, prognozę na 5 dni oraz załaduje mapę pogodową.
3. Lub użyj geolokalizacji – kliknij przycisk „Użyj bieżącej lokalizacji”, aby automatycznie sprawdzić pogodę w Twojej obecnej lokalizacji (wymaga zezwolenia w przeglądarce).
4. Sprawdź szczegóły – zobacz temperaturę odczuwalną, wilgotność, ciśnienie, widoczność oraz godziny wschodu i zachodu słońca.
5. Przeanalizuj jakość powietrza – sprawdź szczegółowe stężenia zanieczyszczeń (PM2.5, PM10, O3, NO2, SO2, CO) z czytelnymi opisami.
6. Sprawdź indeks grillowy – zobacz ocenę warunków do grillowania na podstawie temperatury, wiatru, opadów i wilgotności.
7. Zobacz fazę księżyca – sprawdź aktualną fazę księżyca z ikoną i nazwą.
8. Przeanalizuj prognozę – sprawdź 5-dniową prognozę z informacjami o temperaturze, wietrze, wilgotności i prawdopodobieństwie opadów.
9. Otwórz mapę pogodową – na dole strony znajduje się interaktywna mapa z nakładkami chmur i opadów.
10. Przełącz jednostki – użyj przełącznika °C/°F, aby zmienić system jednostek temperatury i prędkości wiatru.

📊 Dane Meteorologiczne w Aplikacji

Parametr	Opis	Jednostki
Temperatura	Aktualna temperatura powietrza	°C lub °F
Odczuwalna temp.	Temperatura odczuwalna przez człowieka	°C lub °F
Wilgotność	Zawartość pary wodnej w powietrzu	%
Wiatr	Prędkość wiatru	m/s lub mph
Ciśnienie	Ciśnienie atmosferyczne	hPa (hektopaskale)
Widoczność	Odległość widzialności	km lub mile
Opady (POP)	Prawdopodobieństwo opadów w prognozie	%

🌬️ Jakość Powietrza – Szczegółowe Parametry

Zanieczyszczenie	Opis	Źródło
PM2.5	Najgroźniejszy pył – wnika głęboko do płuc i krwi	Spaliny, piece, przemysł
PM10	Pył z dróg, kominów i budów – drażni drogi oddechowe	Rozcieranie opon, budowy, kominy
O₃ Ozon	Powstaje w słoneczne dni – szkodzi płucom i oczom	Reakcje chemiczne w atmosferze
NO₂	Głównie ze spalin samochodowych – powoduje kaszel	Spaliny samochodowe
SO₂	Ze spalania węgla – podrażnia gardło i oczy	Spalanie węgla, przemysł
CO	Tlenek węgla – toksyczny gaz z pieców i aut	Niepełne spalanie

🔥 Indeks Grillowy – Jak Działa?

Aplikacja automatycznie oblicza indeks grillowy na podstawie następujących czynników:

Temperatura – poniżej 15°C obniża ocenę, powyżej 35°C również
Wiatr – powyżej 15 m/s znacznie obniża ocenę
Opady – każde opady obniżają indeks
Wilgotność – powyżej 80% obniża ocenę

Skala ocen:

8-10/10 – Idealny! 🔥
5-7/10 – Możliwy 🌤️
0-4/10 – Niekorzystny 🌧️

🌙 Fazy Księżyca

Aplikacja automatycznie oblicza aktualną fazę księżyca na podstawie daty. Dostępne fazy:

🌑 Nów – księżyc niewidoczny
🌒 Młody księżyc – rosnący sierp
🌓 Pierwsza kwadra – połowa księżyca widoczna
🌔 Rosnący – więcej niż połowa
🌕 Pełnia – cały księżyc widoczny
🌖 Malejący – więcej niż połowa, maleje
🌗 Ostatnia kwadra – połowa księżyca widoczna
🌘 Stary księżyc – malejący sierp

🗺️ Mapa Pogodowa

Aplikacja zawiera interaktywną mapę pogodową opartą na bibliotece Leaflet.js:

- Mapa bazowa – OpenStreetMap z możliwością przybliżania i przesuwania
- Nakładka chmur – wizualizacja zachmurzenia w czasie rzeczywistym
- Nakładka opadów – radar deszczu i śniegu
- Marker lokalizacji – oznacza wyszukiwane miasto
- Responsywność – mapa dostosowuje się do rozmiaru ekranu

🌟 Ciekawostki o Pogodzie

🌡️ Rekord temperatury
Najwyższa temperatura kiedykolwiek zarejestrowana na Ziemi to 56,7°C (134°F) – zmierzono ją 10 lipca 1913 roku w Dolinie Śmierci w Kalifornii.

⚡ Błyskawice
Błyskawica jest około 5 razy gorętsza niż powierzchnia Słońca! Temperatura kanału błyskawicy może osiągnąć nawet 30 000°C.

🌧️ Opady
Najbardziej deszczowym miejscem na Ziemi jest Mawsynram w Indiach, gdzie średnia roczna suma opadów wynosi około 11 872 mm.

💨 Najsilniejszy wiatr
Najwyższą prędkość wiatru kiedykolwiek zarejestrowano 12 kwietnia 1934 roku na Mount Washington w USA – wyniosła ona 372 km/h!

❄️ Płatki śniegu
Każdy płatek śniegu jest unikalny – nie istnieją dwa identyczne płatki śniegu na świecie ze względu na nieskończoną liczbę kombinacji kryształów lodu.

🌫️ Smog w Polsce
Polska ma jeden z najwyższych poziomów zanieczyszczenia powietrza w Europie. Głównym źródłem są piece węglowe w domach jednorodzinnych oraz transport samochodowy.

🔧 Wymagania Techniczne

Przeglądarki

Aplikacja działa we wszystkich nowoczesnych przeglądarkach:

Google Chrome (wersja 60+)
Mozilla Firefox (wersja 60+)
Safari (wersja 12+)
Microsoft Edge (wersja 79+)
Opera (wersja 47+)

Technologie

Aplikacja wykorzystuje:

Fetch API – do pobierania danych z serwera
Promise.all() – do równoczesnego pobierania danych
Geolocation API – do wykrywania lokalizacji
Leaflet.js – biblioteka do map interaktywnych
CSS Grid i Flexbox – do responsywnego układu
CSS Animations – do efektów wizualnych
OpenWeatherMap API – dane pogodowe i jakość powietrza

API Endpoints

Aplikacja korzysta z następujących endpointów OpenWeatherMap:

/data/2.5/weather – aktualna pogoda
/data/2.5/forecast – prognoza 5-dniowa
/data/2.5/air_pollution – jakość powietrza
/geo/1.0/direct – geokodowanie miast
/geo/1.0/reverse – odwrotne geokodowanie
/map/clouds_new – nakładka chmur na mapie
/map/precipitation_new – nakładka opadów na mapie

Jak wstawić pogodę na własną stronę?

Pobieramy klucz api ze strony Weather API aby go wkleić w zaznaczone miejsce w pliku „script.js”:

tu wstaw API_KEY — Tu wklej skopiowany klucz „API_KEY”

Apka nie zadziała na lokalnym komputerze. Musi być wysłana na serwer.

Tworzymy odpowiednie pliki:

index.html
style.css
script.js

index.html

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Pogoda v.3</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js" defer></script>
</head>
<body>
<h1>Pogoda</h1>
<div class="container">
  <div class="weather-input">
    <h3>Wprowadź Miasto</h3>
    <input class="city-input" type="text" placeholder="N.p.Łódź, Zimna Wódka, Tokio">
    <button class="search-btn">Szukaj</button>
    <div class="separator"></div>
    <button class="location-btn">Użyj bieżącej lokalizacji</button>
  </div>
  <div class="weather-data">
    <div class="current-weather">
      <div class="details">
        <h2>_______ ( ______ )</h2>
        <h6>Temperatura: __°C</h6>
        <h6>Wiatr: __ M/S</h6>
        <h6>Wilgotność: __%</h6>
      </div>
    </div>
    <div class="days-forecast">
      <h2>Prognoza na 5 dni</h2>
      <ul class="weather-cards">
        <li class="card">
          <h3>( ______ )</h3>
          <h6>Temp: __C</h6>
          <h6>Wiatr: __ M/S</h6>
          <h6>Wilgotność: __%</h6>
        </li>
        <li class="card">
          <h3>( ______ )</h3>
          <h6>Temp: __C</h6>
          <h6>Wiatr: __ M/S</h6>
          <h6>Wilgotność: __%</h6>
        </li>
        <li class="card">
          <h3>( ______ )</h3>
          <h6>Temp: __C</h6>
          <h6>Wiatr: __ M/S</h6>
          <h6>Wilgotność: __%</h6>
        </li>
        <li class="card">
          <h3>( ______ )</h3>
          <h6>Temp: __C</h6>
          <h6>Wiatr: __ M/S</h6>
          <h6>Wilgotność: __%</h6>
        </li>
        <li class="card">
          <h3>( ______ )</h3>
          <h6>Temp: __C</h6>
          <h6>Wiatr: __ M/S</h6>
          <h6>Wilgotność: __%</h6>
        </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

style.css

/* Import Google font - Open Sans */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}
body {
  background: #E3F2FD;
}
h1 {
  background: #5372F0;
  font-size: 1.75rem;
  text-align: center;
  padding: 18px 0;
  color: #fff;
}
.container {
  display: flex;
  gap: 35px;
  padding: 30px;
}
.weather-input {
  width: 550px;
}
.weather-input input {
  height: 46px;
  width: 100%;
  outline: none;
  font-size: 1.07rem;
  padding: 0 17px;
  margin: 10px 0 20px 0;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.weather-input input:focus {
  padding: 0 16px;
  border: 2px solid #5372F0;
}
.weather-input .separator {
  height: 1px;
  width: 100%;
  margin: 25px 0;
  background: #BBBBBB;
  display: flex;
  align-items: center;
  justify-content: center;
}
.weather-input .separator::before{
  content: "lub";
  color: #6C757D;
  font-size: 1.18rem;
  padding: 0 15px;
  margin-top: -4px;
  background: #E3F2FD;
}
.weather-input button {
  width: 100%;
  padding: 10px 0;
  cursor: pointer;
  outline: none;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  color: #fff;
  background: #5372F0;
  transition: 0.2s ease;
}
.weather-input .search-btn:hover {
  background: #2c52ed;
}
.weather-input .location-btn {
  background: #6C757D;
}
.weather-input .location-btn:hover {
  background: #5c636a;
}
.weather-data {
  width: 100%;
}
.weather-data .current-weather {
  color: #fff;
  background: #5372F0;
  border-radius: 5px;
  padding: 20px 70px 20px 20px;
  display: flex;
  justify-content: space-between;
}
.current-weather h2 {
  font-weight: 700;
  font-size: 1.7rem;
}
.weather-data h6 {
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 500;
}
.current-weather .icon {
  text-align: center;
}
.current-weather .icon img {
  max-width: 120px;
  margin-top: -15px;
}
.current-weather .icon h6 {
  margin-top: -10px;
  text-transform: capitalize;
}
.days-forecast h2 {
  margin: 20px 0;
  font-size: 1.5rem;
}
.days-forecast .weather-cards {
  display: flex;
  gap: 20px;
}
.weather-cards .card {
  color: #fff;
  padding: 18px 16px;
  list-style: none;
  width: calc(100% / 5);
  background: #6C757D;
  border-radius: 5px;
}
.weather-cards .card h3 {
  font-size: 1.3rem;
  font-weight: 600;
}
.weather-cards .card img {
  max-width: 70px;
  margin: 5px 0 -12px 0;
}

@media (max-width: 1400px) {
  .weather-data .current-weather {
    padding: 20px;
  }
  .weather-cards {
    flex-wrap: wrap;
  }
  .weather-cards .card {
    width: calc(100% / 4 - 15px);
  }
}
@media (max-width: 1200px) {
  .weather-cards .card {
    width: calc(100% / 3 - 15px);
  }
}
@media (max-width: 950px) {
  .weather-input {
    width: 450px;
  }
  .weather-cards .card {
    width: calc(100% / 2 - 10px);
  }
}
@media (max-width: 750px) {
  h1 {
    font-size: 1.45rem;
    padding: 16px 0;
  }
  .container {
    flex-wrap: wrap;
    padding: 15px;
  }
  .weather-input {
    width: 100%;
  }
  .weather-data h2 {
    font-size: 1.35rem;
  }
}

script.js

    
// JavaScript Document
// www.skrip.pl
const cityInput = document.querySelector(".city-input");
const searchButton = document.querySelector(".search-btn");
const locationButton = document.querySelector(".location-btn");
const currentWeatherDiv = document.querySelector(".current-weather");
const weatherCardsDiv = document.querySelector(".weather-cards");

const API_KEY = "TU WPISZ API_KEY"; // To wpisz API_KEY z OpenWeatherMap

const createWeatherCard = (cityName, weatherItem, index) => {
    if(index === 0) { 
        return `<div class="details">
                    <h2>${cityName} (${weatherItem.dt_txt.split(" ")[0]})</h2>
                    <h6>Temperatura: ${(weatherItem.main.temp - 273.15).toFixed(2)}°C</h6>
                    <h6>Wiatr: ${weatherItem.wind.speed} M/S</h6>
                    <h6>Wilgotność: ${weatherItem.main.humidity}%</h6>
                </div>
                <div class="icon">
                    <img src="https://openweathermap.org/img/wn/${weatherItem.weather[0].icon}@4x.png" alt="weather-icon">
                    <h6>${weatherItem.weather[0].description}</h6>
                </div>`;
    } else { // HTML for the other five day forecast card
        return `<li class="card">
                    <h3>(${weatherItem.dt_txt.split(" ")[0]})</h3>
                    <img src="https://openweathermap.org/img/wn/${weatherItem.weather[0].icon}@4x.png" alt="weather-icon">
                    <h6>Temp: ${(weatherItem.main.temp - 273.15).toFixed(2)}°C</h6>
                    <h6>Wiatr: ${weatherItem.wind.speed} M/S</h6>
                    <h6>Wilgotność: ${weatherItem.main.humidity}%</h6>
                </li>`;
    }
}

const getWeatherDetails = (cityName, latitude, longitude) => {
    const WEATHER_API_URL = `https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`;

    fetch(WEATHER_API_URL).then(response => response.json()).then(data => {
        // Filter the forecasts to get only one forecast per day
        const uniqueForecastDays = [];
        const fiveDaysForecast = data.list.filter(forecast => {
            const forecastDate = new Date(forecast.dt_txt).getDate();
            if (!uniqueForecastDays.includes(forecastDate)) {
                return uniqueForecastDays.push(forecastDate);
            }
        });

        // Clearing previous weather data
        cityInput.value = "";
        currentWeatherDiv.innerHTML = "";
        weatherCardsDiv.innerHTML = "";

        // Creating weather cards and adding them to the DOM
        fiveDaysForecast.forEach((weatherItem, index) => {
            const html = createWeatherCard(cityName, weatherItem, index);
            if (index === 0) {
                currentWeatherDiv.insertAdjacentHTML("beforeend", html);
            } else {
                weatherCardsDiv.insertAdjacentHTML("beforeend", html);
            }
        });        
    }).catch(() => {
        alert("Wystąpił błąd podczas pobierania prognozy pogody!");
    });
}

const getCityCoordinates = () => {
    const cityName = cityInput.value.trim();
    if (cityName === "") return;
    const API_URL = `https://api.openweathermap.org/geo/1.0/direct?q=${cityName}&limit=1&appid=${API_KEY}`;
    
    // Get entered city coordinates (latitude, longitude, and name) from the API response
    fetch(API_URL).then(response => response.json()).then(data => {
        if (!data.length) return alert(`No coordinates found for ${cityName}`);
        const { lat, lon, name } = data[0];
        getWeatherDetails(name, lat, lon);
    }).catch(() => {
        alert("Wystąpił błąd podczas pobierania współrzędnych!");
    });
}

const getUserCoordinates = () => {
    navigator.geolocation.getCurrentPosition(
        position => {
            const { latitude, longitude } = position.coords; // Get coordinates of user location
            // Get city name from coordinates using reverse geocoding API
            const API_URL = `https://api.openweathermap.org/geo/1.0/reverse?lat=${latitude}&lon=${longitude}&limit=1&appid=${API_KEY}`;
            fetch(API_URL).then(response => response.json()).then(data => {
                const { name } = data[0];
                getWeatherDetails(name, latitude, longitude);
            }).catch(() => {
                alert("Wystąpił błąd podczas pobierania nazwy miasta!");
            });
        },
        error => { // Show alert if user denied the location permission
            if (error.code === error.PERMISSION_DENIED) {
                alert("Geolocation request denied. Please reset location permission to grant access again.");
            } else {
                alert("Geolocation request error. Please reset location permission.");
            }
        });
}

locationButton.addEventListener("click", getUserCoordinates);
searchButton.addEventListener("click", getCityCoordinates);
cityInput.addEventListener("keyup", e => e.key === "Enter" && getCityCoordinates());

Jeśli podczas tworzenia aplikacji pogodowej napotkasz jakiekolwiek trudności lub Twój kod nie działa zgodnie z oczekiwaniami, możesz pobrać pliki kodu aplikacji pogodowej, klikając przycisk poniżej.
Pamiętaj, że po pobraniu pliku będziesz musiał wkleić „Klucz API OpenWeatherMap do API_KEYzmiennej w pliku script.js.

Top Stories

Kalkulator Wagi i Wieku na Planetach – Układ Słoneczny 3D

Video Propt Generator dla AI do tworzenia wideo

Generator Promptów Web AI do tworzenia stron dla laików

Jak zbudować aplikację pogodową na 5 dni

Kompleksowe narzędzie do sprawdzania pogody, jakości powietrza i warunków atmosferycznych

Pogoda

Aplikacja pogodowa

🌤️ Wprowadź Miasto

_______

_______

Stan Powietrza

📅 Prognoza na 5 dni

🗺️ Mapa Pogodowa – chmury w Twojej okolicy

⚠️ Ważne Informacje

🎯 Główne Funkcje

🌡️ Aktualna Pogoda

📅 Prognoza 5 Dni

🗺️ Mapa Pogodowa

🌬️ Jakość Powietrza

🔥 Indeks Grillowy

🌙 Faza Księżyca

🎨 Dynamiczne Tła

✨ Animacje

📖 Jak Używać Aplikacji

📊 Dane Meteorologiczne w Aplikacji

🌬️ Jakość Powietrza – Szczegółowe Parametry

🔥 Indeks Grillowy – Jak Działa?

🌙 Fazy Księżyca

🗺️ Mapa Pogodowa

🌟 Ciekawostki o Pogodzie

🔧 Wymagania Techniczne

Przeglądarki

Technologie

API Endpoints

Jak wstawić pogodę na własną stronę?

index.html

style.css

script.js

Może Ci się spodobać:

Kalkulator do działań na zwykłych ułamkach

Apka pogodowa na stronę

Visual Studio Code online

Idziesz do kasyna: BlackJack – podstawy gry online