From dcaa8e3c7cffb1976af268fb2dfd081027f837f5 Mon Sep 17 00:00:00 2001 From: Andre Logan Date: Mon, 1 Feb 2021 10:10:48 -0500 Subject: [PATCH 1/2] my weather app --- .DS_Store | Bin 0 -> 6148 bytes index.html | 15 +++++++++++-- weatherapp.css | 7 ++++++ weatherapp.js | 59 +++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 79 insertions(+), 2 deletions(-) create mode 100644 .DS_Store create mode 100644 weatherapp.css create mode 100644 weatherapp.js diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..6a37e3a70ceb460ef45c32a4efad7256f02327c3 GIT binary patch literal 6148 zcmeHK%TB{E5S%SVv>;HA9CJmWNc=%sr3VgN;0K@$qM$$#<#o&-@lAXQ%zCY=N$3?J z*sa!MuRV4>k+N9;GI}nKfdPOXU9r<=^Ns1eddoU7vPl%(VioDx$qiaJ9+$T(Oz zWe=}B;gY-0h>z?&@RwqWMe`rZ3%Q3Y+}$Dnm@nne=ip0W0lCT_-8G7pqxB_(rHf%W1{6Ah_|JO-Aas^z0Kc#?l z^YeVfE5+Q}x}4_PgnmI+({+{MlEO|%#ayeYc%L4O@kBesEMjHI2+cnPf(+ic0zaz2 E7o(n19smFU literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 3233671..04a8107 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,20 @@ - Document + Weather App + -

Hola Mundo

+
+

Weather App

+

Enter zipcode

+ + +
+
+ + + + \ No newline at end of file diff --git a/weatherapp.css b/weatherapp.css new file mode 100644 index 0000000..e4bf32a --- /dev/null +++ b/weatherapp.css @@ -0,0 +1,7 @@ +body { + background-color: white; + font-family: Arial, Helvetica, sans-serif; + font-size: 1.1em; + color: gray; +} + diff --git a/weatherapp.js b/weatherapp.js new file mode 100644 index 0000000..f5687ac --- /dev/null +++ b/weatherapp.js @@ -0,0 +1,59 @@ + + +// add click handler for button +document.getElementById("forecast").addEventListener("click", getData); + +function getData() { + const weatherInfo = document.getElementById("weatherInfo"); + // need the zipcode entered + let zipcode = + document.getElementById("zipcode").value; + // set up api + const endpoint = + "http://api.zippopotam.us/US/"+zipcode; + const query = "?zip=" + zipcode + "&units=imperial&appid="; + const url = endpoint + query; + const xhr = new XMLHttpRequest(); + // set up response + xhr.addEventListener("load", responseReceivedHandler); + // required for json + xhr.responseType = "json"; + // open the connection + xhr.open("GET", endpoint); + xhr.send(); + +}; + +// const endpoint = +// "http://www.7timer.info/bin/api.pl?product=civillight&lon=${lon}&lat=${lat}&output=json"; +// const query = "?zip=" + zipcode + "&units=imperial&appid="; +// const url = endpoint + query; +// const xhr2 = new XMLHttpRequest(); +// // set up response +// xhr2.addEventListener("load", responseReceivedHandler); +// // required for json +// xhr2.responseType = "json"; +// // open the connection +// xhr2.open("GET", endpoint); +// xhr2.send(); + + +function responseReceivedHandler() { + if (this.status === 200) { + console.log(this.response); + const data = this.response; + console.log("city is " + data.places[0]["place name"]) + // put data on the page + let output = "

City: " + data.places[0]["place name"] + "

"; + output = "

Location: " + data.places[0]["longitude"] + "

"; + // output += "

Current temp: " + data.main.temp + "°F

"; + // output += "

Description: " + data.weather[0].description + "

"; + // output += "

Humidity: " + data.main.humidity + "%

"; + // display this in the div + + // weatherInfo.innerHTML = output; + } + else { + weatherInfo.innerHTML = "Weather Data Unavailable"; + } +} From ed62462580710cf1c2fea97806c0218d2b07dcc1 Mon Sep 17 00:00:00 2001 From: Andre Logan Date: Thu, 4 Feb 2021 22:49:44 -0500 Subject: [PATCH 2/2] weather app almost done --- index.html | 6 ++++-- weatherapp.js | 45 ++++++++++++++++++++------------------------- 2 files changed, 24 insertions(+), 27 deletions(-) diff --git a/index.html b/index.html index 04a8107..0ccf1f3 100644 --- a/index.html +++ b/index.html @@ -9,10 +9,12 @@

Weather App

-

Enter zipcode

+ - +
+

+

diff --git a/weatherapp.js b/weatherapp.js index f5687ac..35691a3 100644 --- a/weatherapp.js +++ b/weatherapp.js @@ -1,59 +1,54 @@ - +const apiKey = "9d60ac7e8eb3d17560a9e4046dc3f540"; // add click handler for button document.getElementById("forecast").addEventListener("click", getData); function getData() { - const weatherInfo = document.getElementById("weatherInfo"); + // console.log("get data"); + // const weatherInfo = document.getElementById("weatherInfo"); // need the zipcode entered let zipcode = document.getElementById("zipcode").value; + // console.log("zipcode is " + zipcode); // set up api const endpoint = - "http://api.zippopotam.us/US/"+zipcode; - const query = "?zip=" + zipcode + "&units=imperial&appid="; + "https://api.openweathermap.org/data/2.5/forecast" + // "https://api.openweathermap.org/data/2.5/weather"; + // "http://api.zippopotam.us/US/"+zipcode; + const query = "?zip=" + zipcode + "&units=imperial&appid=" + apiKey; const url = endpoint + query; + // console.log(url); const xhr = new XMLHttpRequest(); // set up response xhr.addEventListener("load", responseReceivedHandler); // required for json xhr.responseType = "json"; - // open the connection - xhr.open("GET", endpoint); + // open the connection "endpoint" + xhr.open("GET", url); xhr.send(); }; -// const endpoint = -// "http://www.7timer.info/bin/api.pl?product=civillight&lon=${lon}&lat=${lat}&output=json"; -// const query = "?zip=" + zipcode + "&units=imperial&appid="; -// const url = endpoint + query; -// const xhr2 = new XMLHttpRequest(); -// // set up response -// xhr2.addEventListener("load", responseReceivedHandler); -// // required for json -// xhr2.responseType = "json"; -// // open the connection -// xhr2.open("GET", endpoint); -// xhr2.send(); - - function responseReceivedHandler() { + const weatherInfo = document.getElementById("output"); if (this.status === 200) { console.log(this.response); const data = this.response; - console.log("city is " + data.places[0]["place name"]) + // put data on the page - let output = "

City: " + data.places[0]["place name"] + "

"; - output = "

Location: " + data.places[0]["longitude"] + "

"; + let output = "

City: " + data.city.name + "

"; // output += "

Current temp: " + data.main.temp + "°F

"; + output += "

Current temp: " + data.list[0].main.temp + "°F

"; + output += "

Latitude: " + data.city.coord.lat + "

"; + output += "

Longitude: " + data.city.coord.lon + "

"; // output += "

Description: " + data.weather[0].description + "

"; // output += "

Humidity: " + data.main.humidity + "%

"; // display this in the div - // weatherInfo.innerHTML = output; + weatherInfo.innerHTML = output; } else { - weatherInfo.innerHTML = "Weather Data Unavailable"; + weatherInfo.innerHTML = "City Unavailable"; } } +