code-differently · nomi7677 · Feb 1, 2021 · Feb 1, 2021 · Feb 6, 2021 · Feb 6, 2021
diff --git a/weat.html b/weat.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weather update</title>
+
+</head>
+<body>
+    <h1>Welcome to the Weather App!</h1>
+    <button id="load" onclick="getZipCode()">Get Weather</button>
+<div>
+    <p id="zipCode"></p>
+    <p id="weather"></p>
+
+</div>
+
+
+<script src="weath.js"></script>
+</body>
+</html>
diff --git a/weath.js b/weath.js
@@ -0,0 +1,49 @@
+// crrating button on html and linking to a function getZipCode
+//using AJAX 4 steps for lab
+// conerted temperature to F
+
+let lon = 0.0;
+let lat = 0.0;
+let temp = document.getElementById('weather');
+let loc = document.getElementById('zipCode');
+
+function getZipCode() {
+    const zipCode = prompt("Enter zip code to get the weather updates of your location?");
+    let xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            let locationResponse = JSON.parse(xhr.responseText);
+            lon = locationResponse.places[0].longitude;
+            lat = locationResponse.places[0].latitude;
+            const city = locationResponse.places[0]["place name"];
+            const state = locationResponse.places[0]["state abbreviation"];
+            //console.log(locationResponse);
+            //console.log(lon);
+            //console.log(lat);
+            getWeather(lon, lat);
+
+            loc.innerHTML = city + ", " + state;
+
+        }     
+    }
+    xhr.open('GET', `http://api.zippopotam.us/US/${zipCode}`);
+    xhr.send();
+}
+
+let xhr2 = new XMLHttpRequest();                
+    xhr2.onreadystatechange = function() { 
+        if (xhr2.readyState === 4 && xhr2.status === 200) {
+            let weatherResponse = JSON.parse(xhr2.responseText);
+            min = weatherResponse['dataseries'][0]['temp2m'].min * 9 / 5 + 32;
+            max = weatherResponse['dataseries'][0]['temp2m'].max * 9 / 5 + 32;
+
+            console.log(weatherResponse);
+
+            temp.innerHTML = Math.floor(max) + `&degF`.sup();   
+        } 
+    }
+
+function getWeather(lon, lat) {
+        xhr2.open('GET', `http://www.7timer.info/bin/api.pl?product=civillight&lon=${lon}&lat=${lat}&output=json`);
+        xhr2.send();
+    }
diff --git a/weather.js b/weather.js
@@ -0,0 +1,44 @@
+function getWeather() {
+    let temperature = document.getElementById("temperature");
+    let description = document.getElementById("description");
+    let location = document.getElementById("location");
+
+    let api = "https://api.openweathermap.org/data/2.5/weather";
+    let apiKey = "f146799a557e8ab658304c1b30cc3cfd";
+
+    location.innerHTML = "Locating...";
+
+    navigator.geolocation.getCurrentPosition(success, error);
+
+    function success(position) {
+      latitude = position.coords.latitude;
+      longitude = position.coords.longitude;
+
+      let url =
+        api +
+        "?lat=" +
+        latitude +
+        "&lon=" +
+        longitude +
+        "&appid=" +
+        apiKey +
+        "&units=imperial";
+
+      fetch(url)
+        .then(response => response.json())
+        .then(data => {
+          console.log(data);
+          let temp = data.main.temp;
+          temperature.innerHTML = temp + "° F";
+          location.innerHTML =
+            data.name;
+          description.innerHTML = data.weather[0].main;
+        });
+    }
+
+    function error() {
+      location.innerHTML = "Unable to retrieve your location";
+    }
+  }
+
+  getWeather();