From 0085ea95aeef5c3ed472895090aa6bb4d4eca5a2 Mon Sep 17 00:00:00 2001 From: Amatullah Brown Date: Thu, 28 Jan 2021 19:38:48 -0500 Subject: [PATCH 1/5] part 3 complete, issue with Date object, not sure if problem is with local machine or not, detailed in comments weather.js:42-45 --- .vscode/settings.json | 3 ++ index.html | 4 +- weather.css | 105 ++++++++++++++++++++++++++++++++++++++++++ weather.html | 14 ++++++ weather.js | 79 +++++++++++++++++++++++++++++++ 5 files changed, 204 insertions(+), 1 deletion(-) create mode 100644 .vscode/settings.json create mode 100644 weather.css create mode 100644 weather.html create mode 100644 weather.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index 3233671..be57485 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,11 @@ - Document + Weather +

Hola Mundo

+
\ No newline at end of file diff --git a/weather.css b/weather.css new file mode 100644 index 0000000..7bdbf86 --- /dev/null +++ b/weather.css @@ -0,0 +1,105 @@ +@import url('https://fonts.googleapis.com/css?family=Google+Sans&display=swap'); +body { + font-family: 'Google Sans', arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + text-align: center; +} +img { + width: 50px; + height: 50px; +} +#weather-data { + display: grid; + grid-template-areas: + "location . . . . . degree-div" + "week week week week week week week"; +} +#location { + grid-area: location; + color: #b5b5b5; +} +#degree-div, +.degree-div { + grid-area: degree-div; + color: black; + display: grid; + grid-template-areas: + "degree degree-type" + "degree ."; + width: 90px; +} +#week { + grid-area: week; + display: grid; + grid-template-areas: "day1 day2 day3 day4 day5 day6 day7"; +} +#degree, +.degree { + grid-area: degree +} +#degree-type, +.degree-type { + grid-area: degree-type; +} +.min { + color: #b5b5b5; +} +.day-name { + grid-area: day-name; +} +.icon { + grid-area: icon; +} +.minmax { + display: flex; + grid-area: minmax; + justify-content: center; +} +#day1 { + grid-area: day1; + grid-template-areas: + "day-name" + "icon" + "minmax"; +} +#day2 { + grid-area: day2; + grid-template-areas: + "day-name" + "icon" + "minmax"; +} +#day3 { + grid-area: day3; + grid-template-areas: + "day-name" + "icon" + "minmax"; +} +#day4 { + grid-area: day4; + grid-template-areas: + "day-name" + "icon" + "minmax"; +} +#day5 { + grid-area: day5; + grid-template-areas: + "day-name" + "icon" + "minmax"; +} +#day6 { + grid-area: day6; + grid-template-areas: + "day-name" + "icon" + "minmax"; +} +#day7 { + grid-area: day7; + grid-template-areas: + "day-name" + "icon" + "minmax"; +} \ No newline at end of file diff --git a/weather.html b/weather.html new file mode 100644 index 0000000..a5afa81 --- /dev/null +++ b/weather.html @@ -0,0 +1,14 @@ + + + + + + Weather + + + +

+
+ + + \ No newline at end of file diff --git a/weather.js b/weather.js new file mode 100644 index 0000000..f479edf --- /dev/null +++ b/weather.js @@ -0,0 +1,79 @@ +// https://api.zippopotam.us/us/90210 +// {"post code": "90210", "country": "United States", +//"country abbreviation": "US", +//"places": [{"place name": "Beverly Hills", "longitude": "-118.4065", "state": "California", "state abbreviation": "CA", "latitude": "34.0901"}]} + +const zipcode = prompt("What's your zipcode? "); +const zipData = new XMLHttpRequest(); +const div = document.getElementById('weather-data'); +const title = document.getElementById('title'); +let longitude = 0.0; +let latitude = 0.0; +zipData.onreadystatechange = () => { + if (zipData.readyState === 4 && zipData.status === 200) { + const locationData = JSON.parse(zipData.responseText); + const city = locationData.places[0][ 'place name' ]; + const state = locationData.places[0][ 'state abbreviation' ]; + div.innerHTML = `

${city}, ${state}

`; + title.textContent = `Weather for ${city}`; + longitude = parseFloat(locationData.places[0].longitude); + latitude = parseFloat(locationData.places[0].latitude); + weatherDataLong.open('GET', `http://www.7timer.info/bin/api.pl?lon=${longitude}&lat=${latitude}&product=civil&output=json`); + weatherDataLong.send(); + weatherDataSimple.open('GET', `http://www.7timer.info/bin/api.pl?lon=${longitude}&lat=${latitude}&product=civillight&output=json`); + weatherDataSimple.send(); + } +} + +zipData.open('GET', `https://api.zippopotam.us/us/${zipcode}`); +zipData.send(); + +const weatherDataSimple = new XMLHttpRequest(); +weatherDataSimple.onreadystatechange = () => { + if (weatherDataSimple.readyState === 4 && weatherDataSimple.status === 200) { + const meteoData = JSON.parse(weatherDataSimple.responseText); + const min = meteoData[ 'dataseries' ][0][ 'temp2m' ][ 'min' ] * 9 / 5 + 32; + const max = meteoData[ 'dataseries' ][0][ 'temp2m' ][ 'max' ] * 9 / 5 + 32; + let forecast = ``; + const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; + for (let i=0; i`; + icon == 'clear' ? icon = `` + : icon == 'lightsnow' ? icon = `` + : icon == 'snow' ? icon = `` + : icon == 'rain' ? icon = `` + : icon == 'lightrain' ? icon = `` + : icon == 'thunderstorm' ? icon = `` + : icon == 'windy' ? icon = `` + : icon = ``; //else cloudy + console.log(`http://www.7timer.info/bin/api.pl?lon=${longitude}&lat=${latitude}&product=civillight&output=json`); + // : icon == + //condition1 ? value1 : condition2 ? value2 : condition3 ? value3 : value4 == + forecast += `
+
${day}
+
${icon}
+
+

${max}°

${min}°

+
`; + } + div.innerHTML += `
${forecast}
`; + } +} + +const weatherDataLong = new XMLHttpRequest(); +weatherDataLong.onreadystatechange = () => { + if (weatherDataLong.readyState === 4 && weatherDataLong.status === 200) { + const meteoData = JSON.parse(weatherDataLong.responseText); + const current = meteoData[ 'dataseries' ][0][ 'temp2m' ] * 9 / 5 + 32; //current temp -- temp2m is not the surface temp, cannot find surface temp in data + div.innerHTML += `

${current}

°F

`; + } +} + From 6e7c02f0d48f05af9cc51fec7c9f260ff77c34db Mon Sep 17 00:00:00 2001 From: Amatullah Brown Date: Thu, 28 Jan 2021 20:28:46 -0500 Subject: [PATCH 2/5] completed using geolocation data --- weather.css | 47 ++++++++++++++++++++++++++++++++++++++ weather.js | 65 ++++++++++++++++++++++++++++++++--------------------- 2 files changed, 87 insertions(+), 25 deletions(-) diff --git a/weather.css b/weather.css index 7bdbf86..3731c4c 100644 --- a/weather.css +++ b/weather.css @@ -102,4 +102,51 @@ img { "day-name" "icon" "minmax"; +} +@media (max-width: 675px) { + #weather-data { + display: grid; + grid-template-areas: + "location . degree-div" + "week week"; + } + #week { + grid-area: week; + display: grid; + grid-template-areas: + "day1 day2 day3 day4" + "day5 day6 day7 ."; + } +} +@media (max-width: 450px) { + #week { + grid-area: week; + display: grid; + grid-template-areas: + "day1 day2" + "day3 day4" + "day5 day6" + "day7 ."; + } +} +@media (max-width: 250px) { + #weather-data { + display: grid; + grid-template-areas: + "location" + "degree-div" + "week"; + } + #week { + grid-area: week; + display: grid; + grid-template-areas: + "day1" + "day2" + "day3" + "day4" + "day5" + "day6" + "day7"; + } } \ No newline at end of file diff --git a/weather.js b/weather.js index f479edf..f40f562 100644 --- a/weather.js +++ b/weather.js @@ -1,32 +1,50 @@ -// https://api.zippopotam.us/us/90210 -// {"post code": "90210", "country": "United States", -//"country abbreviation": "US", -//"places": [{"place name": "Beverly Hills", "longitude": "-118.4065", "state": "California", "state abbreviation": "CA", "latitude": "34.0901"}]} +// gets user coordinates from navigator.geolocation + // uses coordinates to get weather for that location +// if user does not share location, asks user for zipcode + // uses zipcode data to get coordinates + // uses coordinates to get weather for that location -const zipcode = prompt("What's your zipcode? "); -const zipData = new XMLHttpRequest(); const div = document.getElementById('weather-data'); const title = document.getElementById('title'); let longitude = 0.0; let latitude = 0.0; -zipData.onreadystatechange = () => { - if (zipData.readyState === 4 && zipData.status === 200) { - const locationData = JSON.parse(zipData.responseText); - const city = locationData.places[0][ 'place name' ]; - const state = locationData.places[0][ 'state abbreviation' ]; - div.innerHTML = `

${city}, ${state}

`; - title.textContent = `Weather for ${city}`; - longitude = parseFloat(locationData.places[0].longitude); - latitude = parseFloat(locationData.places[0].latitude); - weatherDataLong.open('GET', `http://www.7timer.info/bin/api.pl?lon=${longitude}&lat=${latitude}&product=civil&output=json`); - weatherDataLong.send(); - weatherDataSimple.open('GET', `http://www.7timer.info/bin/api.pl?lon=${longitude}&lat=${latitude}&product=civillight&output=json`); - weatherDataSimple.send(); +function getZip() { + const zipcode = prompt("What's your zipcode? "); + const zipData = new XMLHttpRequest(); + zipData.onreadystatechange = () => { + if (zipData.readyState === 4 && zipData.status === 200) { + const locationData = JSON.parse(zipData.responseText); + const city = locationData.places[0][ 'place name' ]; + const state = locationData.places[0][ 'state abbreviation' ]; + div.innerHTML = `

${city}, ${state}

`; + title.textContent = `Weather for ${city}`; + longitude = parseFloat(locationData.places[0].longitude); + latitude = parseFloat(locationData.places[0].latitude); + getWeather(latitude, longitude); + } } + zipData.open('GET', `https://api.zippopotam.us/us/${zipcode}`); + zipData.send(); +} +function success(pos){ + const latitude = pos.coords.latitude; + const longitude = pos.coords.longitude; + fetch(`https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=6adef887fbe447abb28e7bd2833e97b3`) + .then(response => response.json()) + .then(data => { + title.textContent = `Weather for ${data.results[0].components.city}`; + div.innerHTML = `

${data.results[0].components.city}, ${data.results[0].components.state_code}

`; + }); + getWeather(latitude, longitude); +} +function getWeather(latitude, longitude) { + weatherDataLong.open('GET', `http://www.7timer.info/bin/api.pl?lon=${longitude}&lat=${latitude}&product=civil&output=json`); + weatherDataLong.send(); + weatherDataSimple.open('GET', `http://www.7timer.info/bin/api.pl?lon=${longitude}&lat=${latitude}&product=civillight&output=json`); + weatherDataSimple.send(); } -zipData.open('GET', `https://api.zippopotam.us/us/${zipcode}`); -zipData.send(); +navigator.geolocation.getCurrentPosition(success, getZip); const weatherDataSimple = new XMLHttpRequest(); weatherDataSimple.onreadystatechange = () => { @@ -45,7 +63,6 @@ weatherDataSimple.onreadystatechange = () => { else day = days[0]; // but if the date obj works as it shoudl, will be wrong let icon = meteoData[ 'dataseries' ][i][ 'weather' ]; - // if (icon == 'clear') icon = ``; icon == 'clear' ? icon = `` : icon == 'lightsnow' ? icon = `` : icon == 'snow' ? icon = `` @@ -55,13 +72,11 @@ weatherDataSimple.onreadystatechange = () => { : icon == 'windy' ? icon = `` : icon = ``; //else cloudy console.log(`http://www.7timer.info/bin/api.pl?lon=${longitude}&lat=${latitude}&product=civillight&output=json`); - // : icon == - //condition1 ? value1 : condition2 ? value2 : condition3 ? value3 : value4 == forecast += `
${day}
${icon}
-

${max}°

${min}°

+

${parseFloat(max.toFixed(2))}°

${parseFloat(min.toFixed(2))}°

`; } div.innerHTML += `
${forecast}
`; From a1530269dddc19fd6a2f1c84911de7f318014f8a Mon Sep 17 00:00:00 2001 From: Amatullah Brown Date: Thu, 28 Jan 2021 20:32:03 -0500 Subject: [PATCH 3/5] removed index.html --- index.html | 13 ------------- 1 file changed, 13 deletions(-) delete mode 100644 index.html diff --git a/index.html b/index.html deleted file mode 100644 index be57485..0000000 --- a/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - Weather - - - -

Hola Mundo

-
- - \ No newline at end of file From ceb0b09cf41bac1de24c1cd447518665d42065c7 Mon Sep 17 00:00:00 2001 From: Amatullah Brown Date: Fri, 29 Jan 2021 10:05:12 -0500 Subject: [PATCH 4/5] fixed windy icon --- weather.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/weather.js b/weather.js index f40f562..39ff839 100644 --- a/weather.js +++ b/weather.js @@ -69,7 +69,8 @@ weatherDataSimple.onreadystatechange = () => { : icon == 'rain' ? icon = `` : icon == 'lightrain' ? icon = `` : icon == 'thunderstorm' ? icon = `` - : icon == 'windy' ? icon = `` + : icon == 'foggy' ? icon = `` + : icon == 'windy' ? icon = `` : icon = ``; //else cloudy console.log(`http://www.7timer.info/bin/api.pl?lon=${longitude}&lat=${latitude}&product=civillight&output=json`); forecast += `
From 08e573ddfc766bc89d266683b0cfb7387f1b4ed1 Mon Sep 17 00:00:00 2001 From: Amatullah Brown Date: Fri, 5 Feb 2021 12:41:02 -0500 Subject: [PATCH 5/5] removed key? --- weather.html | 1 + weather.js | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/weather.html b/weather.html index a5afa81..204a77b 100644 --- a/weather.html +++ b/weather.html @@ -9,6 +9,7 @@

+ \ No newline at end of file diff --git a/weather.js b/weather.js index 39ff839..6f5c1fc 100644 --- a/weather.js +++ b/weather.js @@ -29,7 +29,8 @@ function getZip() { function success(pos){ const latitude = pos.coords.latitude; const longitude = pos.coords.longitude; - fetch(`https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=6adef887fbe447abb28e7bd2833e97b3`) + const key = config.geo_key; + fetch(`https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=${geo_key}`) .then(response => response.json()) .then(data => { title.textContent = `Weather for ${data.results[0].components.city}`; @@ -71,6 +72,7 @@ weatherDataSimple.onreadystatechange = () => { : icon == 'thunderstorm' ? icon = `` : icon == 'foggy' ? icon = `` : icon == 'windy' ? icon = `` + : icon == 'partlycloudy' ? icon = `` : icon = ``; //else cloudy console.log(`http://www.7timer.info/bin/api.pl?lon=${longitude}&lat=${latitude}&product=civillight&output=json`); forecast += `