[JSMomentum] = Geo location api

Author: lee-garden

JSforBeginners/index.html

@@ -22,6 +22,7 @@ <h4 class="js-greetings greetings"></h4>
     </form>
     <ul class="js-toDoList">
     </ul>
+    <span class="js-weather"></span>
     <script src="clock.js"></script>
     <script src="gretting.js"></script>
     <script src="todo.js"></script>

JSforBeginners/weather.js

@@ -1,6 +1,20 @@
+const weather = document.querySelector(".js-weather");
+
 const API_KEY = 'cfb3b9813c0b7484f3e348497ab68b28';
 const COORDS = 'coords';
 
+function getWeather(lat, lon) {
+    fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`
+    ).then(function(response) {
+        return response.json();
+    }).then(function(json) {
+        const temperature = json.main.temp;
+        const place = json.name;
+
+        weather.innerText = `${temperature} @ ${place}`;
+    });
+}
+
 function saveCoords(coordsObj) {
     localStorage.setItem(COORDS, JSON.stringify(coordsObj));
 }
@@ -13,6 +27,7 @@ function handleGeoSuccess(position) {
         longitude,
     };
     saveCoords(coordsObj);
+    getWeather(latitude, longitude);
 }
 
 function handleGeoError() {
@@ -28,9 +43,11 @@ function loadCoords() {
     const loadedCoords = localStorage.getItem(COORDS);
 
     if (loadedCoords === null) {
-            askForCoords();
+        askForCoords();
     } else {
-
+        const parseCoords = JSON.parse(loadedCoords);
+        getWeather(parseCoords.latitude, parseCoords.longitude);
+        console.log(parseCoords);
     }
 }