OWMAPI

1 month ago · 5fb87120cd
2 changed files with 75 additions and 0 deletions
--- a/28_openweathermap/index.html
+++ b/28_openweathermap/index.html
@ -0,0 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenWeatherMap</title>
 </head>
 <body>
    <h1>Aplikace na pocasi z OpenWeatherMap</h1>
    <p>Zadej název města a zjisti aktuální počasí</p>
    <input type="text" id="mestoInput" placeholder="Název Města (např. Praha)">
    <button id="btnHledej">Hledat infomrace o počasí</button>
    <div id="chyba"></div>
    <div id="vysledek"></div>
    <script src="script.js"></script>
 </body>
 </html>
--- a/28_openweathermap/script.js
+++ b/28_openweathermap/script.js
@ -0,0 +1,55 @@
 // Api klíč naleznete na https://home.openweathermap.org/api_keys
 const API_KLIC = "f70d944f638a7ae77de89435d4d23c01"
 async function zjistiPocasi() {
    let mesto = document.getElementById("mestoInput").value.trim();
    if (mesto == ""){
        document.getElementById("chyba").textContent = "Zadej název města!"
        return
    }
    document.getElementById("chyba").textContent = "";
    document.getElementById("vysledek").innerHTML = "<p>Načítám....</p>";
    try {
        await fetchPocasi(mesto);
    } catch (error) {
        document.getElementById("chyba").textContent = error.message;
        document.getElementById("vysledek").innerHTML = "";
    }
 }
 async function fetchPocasi(mesto) {
    let url = "https://api.openweathermap.org/data/2.5/weather"
                + "?q=" + mesto
                + "&appid=" + API_KLIC
                + "&units=metric"
                + "&lang=cz";
    let response = await fetch(url);
    if (!response.ok) {
        throw new Error("Město nenalezno! Zkontroluj název");
    }
    let data = await response.json();
    console.log(data)
    zobrazPocasi(data);
 }
 function zobrazPocasi(data) {
    let vysledek = document.getElementById("vysledek");
    let ikonaURL = "https://openweathermap.org/img/wn/"
    + data.weather[0].icon + "@2x.png";
    vysledek.innerHTML = `
    <h2> ${data.name}, ${data.sys.country} </h2>
    <img src="${ikonaURL}">
    <p>Pocasi: ${data.weather[0].description}</p>
    <p>Teplota: ${data.main.temp}°C</p>
    <p>Pocitová Teplota: ${Math.round(data.main.feels_like)}°C</p>
    <p>Vlhkost: ${data.main.humidity}%</p>
    <p>Vítr: ${data.wind.speed} m/s</p>
    `;
 }
 document.getElementById("btnHledej").addEventListener("click",zjistiPocasi);
 document.getElementById("mestoInput").addEventListener("keypress",function(e){
    if(e.key === "Enter"){
        zjistiPocasi();
    }
 });