diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..9ca130c Binary files /dev/null and b/.DS_Store differ diff --git a/css/custom.css b/css/custom.css new file mode 100644 index 0000000..983e23d --- /dev/null +++ b/css/custom.css @@ -0,0 +1,56 @@ + header, + main + { + border: solid black 1px; + padding: .5em; + } + + header { + grid-area: header; + background-color: rgb(220, 227, 233); + } + + main { + grid-area: main; + background-color: aliceblue; + padding-top: 20px; + } + + #zipCode { + width: 6em; + } + + #forecast { + width: 100%; + display: flexbox; + flex-direction: row; + color: grey; + } + + #temperature{ + font-size: 2em; + } + + img { + width: 50px; + height: 50px; + display: block; + margin: auto; + padding-bottom: 5px; + } + + #imgForTemp { + width: 150px; + height: 150px; + display: inline-block; + margin: auto; + padding: 15px; + } + + .container { + grid-template-columns: 1fr; + grid-template-rows: minmax(200px, auto) minmax(200px, auto); + grid-template-areas: + "header" + "main"; + } diff --git a/imgs/.DS_Store b/imgs/.DS_Store new file mode 100644 index 0000000..461b698 Binary files /dev/null and b/imgs/.DS_Store differ diff --git a/imgs/clear.jpeg b/imgs/clear.jpeg new file mode 100644 index 0000000..647da1f Binary files /dev/null and b/imgs/clear.jpeg differ diff --git a/imgs/cloudy.jpeg b/imgs/cloudy.jpeg new file mode 100644 index 0000000..bd0c672 Binary files /dev/null and b/imgs/cloudy.jpeg differ diff --git a/imgs/lightsnow.jpeg b/imgs/lightsnow.jpeg new file mode 100644 index 0000000..6a863f8 Binary files /dev/null and b/imgs/lightsnow.jpeg differ diff --git a/imgs/mcloudy.jpeg b/imgs/mcloudy.jpeg new file mode 100644 index 0000000..3f395ee Binary files /dev/null and b/imgs/mcloudy.jpeg differ diff --git a/imgs/partlycloudy.jpeg b/imgs/partlycloudy.jpeg new file mode 100644 index 0000000..4efac11 Binary files /dev/null and b/imgs/partlycloudy.jpeg differ diff --git a/imgs/rain.jpeg b/imgs/rain.jpeg new file mode 100644 index 0000000..cf813fc Binary files /dev/null and b/imgs/rain.jpeg differ diff --git a/imgs/snow.jpeg b/imgs/snow.jpeg new file mode 100644 index 0000000..8293017 Binary files /dev/null and b/imgs/snow.jpeg differ diff --git a/imgs/thunderstorm.jpeg b/imgs/thunderstorm.jpeg new file mode 100644 index 0000000..826bf0b Binary files /dev/null and b/imgs/thunderstorm.jpeg differ diff --git a/imgs/thunderstormwithrain.jpeg b/imgs/thunderstormwithrain.jpeg new file mode 100644 index 0000000..5631089 Binary files /dev/null and b/imgs/thunderstormwithrain.jpeg differ diff --git a/index.html b/index.html index 3233671..a50d0cf 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,43 @@ + - Document + Weather App + + + + -

Hola Mundo

+
+
+

Weather App

+ +
+ +
+ + +
+ + + + + +
+

Forecast:

+
+
+ +
+ + +   + + \ No newline at end of file diff --git a/js/plugins.js b/js/plugins.js new file mode 100644 index 0000000..6dae87c --- /dev/null +++ b/js/plugins.js @@ -0,0 +1,114 @@ +///  + +let weatherTemp; +let weekdays = { 0 : "Sunday", 1 : "Monday", 2 : "Tuesday", 3 : "Wednesday", 4 : "Thursday", 5 : "Friday", 6 : "Saturday" }; + + +$(document).ready(function() { + $forecast = $('#forecast'); + $($forecast).removeClass(); + + const watchId = navigator.geolocation.watchPosition(successCallback, errorCallback); +}); + +const successCallback = (position) => { + let longitude = position.coords.longitude; + let latitude = position.coords.latitude; + + GetWeather(longitude, latitude); + DisplayLocation(longitude, latitude); + NextSevenDays(); +}; + +const errorCallback = (error) => { + console.log(error); +}; + + +function GetWeather(longitude, latitude) { + let product = "civillight"; + let output = "json"; + + let client = new XMLHttpRequest(); + + client.open("GET", `http://www.7timer.info/bin/api.pl?lon=${longitude}&lat=${latitude}&product=${product}&output=${output}`, false); + + client.overrideMimeType("application/document"); + + if (client.onreadystatechange = function () { + + if (client.readyState == 4) { + let response = JSON.parse(client.responseText); + weatherTemp = response.dataseries; + console.log(weatherTemp); + $('#temperature').text(ConvertToFaranHeight(response.dataseries[0].temp2m.max)); + $('#imgForTemp').attr("src", `imgs/${weatherTemp[0].weather}.jpeg`); + } + + }); + + client.send(); +} + +function ConvertToFaranHeight(celcius) { + return (celcius * 9 / 5) + 32; +} + +function DisplayLocation(longitude, latitude){ + + const request = new XMLHttpRequest(); + + const method = 'GET'; + const url = `https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${latitude}&longitude=${longitude}&localityLanguage=en`; + const async = false; + + request.open(method, url, async); + request.onreadystatechange = function(){ + if(request.readyState == 4 && request.status == 200){ + const data = JSON.parse(request.responseText); + const localLocation = data.city.length > 0 ? data.city : data.locality; + const country = data.countryCode; + $('#location').text(`${localLocation}, ${country}`); + } + }; + request.send(); + + }; + +function NextSevenDays() { + const $forecast = $('#forecast'); + $forecast.html(""); + const todaysDate = new Date().getDay(); + + + let i = todaysDate; + let k = 0; + for(; i < 7; i++){ + SetCard(i, weatherTemp[k].temp2m.min, weatherTemp[k].temp2m.max, weatherTemp[i].weather); + k++; + } + for(let j = 0; j < todaysDate; j++){ + SetCard(j, weatherTemp[k].temp2m.min, weatherTemp[k].temp2m.max, weatherTemp[j].weather); + k++; + } + + +} + +function SetCard(day, min, max, weatherPic) { + $forecast.append( + ` +
+
${weekdays[day].substring(0, 3)}
+ +
+ ${weatherPic} + ${ConvertToFaranHeight(max)}\u00B0 + ${ConvertToFaranHeight(min)}\u00B0 +
+
+ ` + ); + + $forecast.addClass("d-inline-flex justify-content-around text-center"); +} \ No newline at end of file