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();
+    }
+});