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 deleted file mode 100644 index 3233671..0000000 --- a/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - Document - - -

Hola Mundo

- - \ No newline at end of file diff --git a/weather.css b/weather.css new file mode 100644 index 0000000..3731c4c --- /dev/null +++ b/weather.css @@ -0,0 +1,152 @@ +@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"; +} +@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.html b/weather.html new file mode 100644 index 0000000..204a77b --- /dev/null +++ b/weather.html @@ -0,0 +1,15 @@ + + + + + + Weather + + + +

+
+ + + + \ No newline at end of file diff --git a/weather.js b/weather.js new file mode 100644 index 0000000..6f5c1fc --- /dev/null +++ b/weather.js @@ -0,0 +1,97 @@ +// 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 div = document.getElementById('weather-data'); +const title = document.getElementById('title'); +let longitude = 0.0; +let latitude = 0.0; +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; + 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}`; + 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(); +} + +navigator.geolocation.getCurrentPosition(success, getZip); + +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 == 'lightsnow' ? icon = `` + : icon == 'snow' ? icon = `` + : icon == 'rain' ? icon = `` + : icon == 'lightrain' ? icon = `` + : 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 += `
+
${day}
+
${icon}
+
+

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

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

+
`; + } + 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

`; + } +} +