diff --git a/weat.html b/weat.html new file mode 100644 index 0000000..696e5b6 --- /dev/null +++ b/weat.html @@ -0,0 +1,21 @@ + + + + + + Weather update + + + +

Welcome to the Weather App!

+ +
+

+

+ +
+ + + + + \ No newline at end of file diff --git a/weath.js b/weath.js new file mode 100644 index 0000000..0f38203 --- /dev/null +++ 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) + `°F`.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 new file mode 100644 index 0000000..991a934 --- /dev/null +++ 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(); \ No newline at end of file