8.2

js/index.html

@@ -26,6 +26,10 @@ <h1 class="hidden" id="greeting"></h1>
       <span></span>
       <span></span>
     </div>
+    <div id="weather">
+      <span></span>
+      <span></span>
+    </div>
     <script src="js/greetings.js"></script>
     <script src="js/clock.js"></script>
     <script src="js/quotes.js"></script>

js/js/weather.js

@@ -1,10 +1,19 @@
+const weather = document.querySelector("#weather span:first-child");
+const city = document.querySelector("#weather span:last-child");
+const API_KEY = "241051bf13976dd3ddf8b8d9f247255e";
+
 function onGeoOk(position) {
   const lat = position.coords.latitude;
-  const lng = position.coords.longitude;
-  console.log("You live in", lat, lng);
+  const lon = position.coords.longitude;
+  const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`;
+  fetch(url)
+    .then((response) => response.json())
+    .then((data) => {
+      city.innerText = data.name;
+      weather.innerText = `${data.weather[0].main} / ${data.main.temp}`;
+    });
 }
 function onGeoError() {
   alert("Can't find you. No weather for you.");
 }
-
 navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);