diff --git a/assets/javascript/moment.js b/assets/javascript/moment.js index 1c18684..cf1555c 100644 --- a/assets/javascript/moment.js +++ b/assets/javascript/moment.js @@ -1,6 +1,6 @@ //! moment.js -;(function (global, factory) { +(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : global.moment = factory() diff --git a/assets/javascript/weather.js b/assets/javascript/weather.js index ca687a2..aeeacdb 100644 --- a/assets/javascript/weather.js +++ b/assets/javascript/weather.js @@ -1,58 +1,117 @@ -let dayArray = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] //weatherForcast() function weatherForcast(searchCity) { + var APIKey = '87231f56cfbb4322a1a44bc975de93ac'; + //api call for 5 day forecast + var queryURL = `https://api.openweathermap.org/data/2.5/forecast?q=${searchCity}&units=imperial&appid=${APIKey}`; + //API call for current temp + let currentTemp = `https://api.openweathermap.org/data/2.5/weather?q=${searchCity}&units=imperial&appid=${APIKey}`; - var APIKey = "87231f56cfbb4322a1a44bc975de93ac"; - //api call for 5 day forecast - var queryURL = `https://api.openweathermap.org/data/2.5/forecast?q=${searchCity}&units=imperial&appid=` + APIKey; - //API call for current temp - let currentTemp = `https://api.openweathermap.org/data/2.5/weather?q=${searchCity}&units=imperial&appid=` + APIKey; - //${searchCity} - //for current temp - $.ajax({ - url: currentTemp, - method: "GET" - }) - .then(function (searchResponse) { - $('#current-temp').html(searchResponse.name + "'s" + ' Current Temp: ' + searchResponse.main.temp + " " + "") - console.log(searchResponse) - }) - //for 5 day forecast - $.ajax({ - url: queryURL, - method: "GET" - }) - .then(function (weatherForecast) { - let dailyForecast = weatherForecast.list; - let temperatureArray = [] + //for current temp + $.ajax({ + url: currentTemp, + method: 'GET', + }).then(function(searchResponse) { + curr = searchResponse.main.temp; + currIcon = searchResponse.weather[0].icon; + $('#current-temp').html( + `${searchResponse.name}'s Current Temp: ${ + searchResponse.main.temp + } ` + ); + }); + //for 5 day forecast + $.ajax({ + url: queryURL, + method: 'GET', + }).then(function(forecast) { + let dailyForecast = forecast.list; + let days = [ + { + data: [], + time: moment() + .add(1, 'days') + .format('YYYY-MM-DD'), + }, + { + data: [], + time: moment() + .add(2, 'days') + .format('YYYY-MM-DD'), + }, + { + data: [], + time: moment() + .add(3, 'days') + .format('YYYY-MM-DD'), + }, + { + data: [], + time: moment() + .add(4, 'days') + .format('YYYY-MM-DD'), + }, + { + data: [], + time: moment() + .add(5, 'days') + .format('YYYY-MM-DD'), + }, + ]; - for (i = 0; i < dailyForecast.length; i+=8) { - let day = moment(dailyForecast[i].dt_txt).format('ddd') - let hour = moment(dailyForecast[i].dt_txt).format('HH') - temperatureArray.push({ - days: day, - tempMax: dailyForecast[i].main.temp_max, - tempMin: dailyForecast[i].main.temp_min, - icon: '' - }) - - } - $(".day1").html(temperatureArray[0].days + " " + temperatureArray[0].icon + "
" + "Low: " + temperatureArray[0].tempMin + " " + "High: " + temperatureArray[0].tempMax); - $(".day2").html(temperatureArray[1].days + " " + temperatureArray[1].icon + "
" + "Low: " + temperatureArray[1].tempMin + " " + "High: " + temperatureArray[1].tempMax); - $(".day3").html(temperatureArray[2].days + " " + temperatureArray[2].icon + "
" + "Low: " + temperatureArray[2].tempMin + " " + "High: " + temperatureArray[2].tempMax); - $(".day4").html(temperatureArray[3].days + " " + temperatureArray[3].icon + "
" + "Low: " + temperatureArray[3].tempMin + " " + "High: " + temperatureArray[3].tempMax); - $(".day5").html(temperatureArray[4].days + " " + temperatureArray[4].icon + "
" + "Low: " + temperatureArray[4].tempMin + " " + "High: " + temperatureArray[4].tempMax); - console.log(temperatureArray) - //temperatureArray.filter(dayFilter(i)) - //console.log('Temperature Array', temperatureArray.filter(dayFilter(i))) + // Break days up into 24hrs + dailyForecast.map(x => { + let curDate = x.dt_txt; + let matchDate = curDate.substr(0, curDate.indexOf(' ')); + days.map(y => { + if (matchDate === y.time) { + y.data.push(x); + } + }); + }); - //Math.max(temperatureArray.filter(tempMax)) - //Math.min(temperatureArray.filter(tempMin)) - - }) + function getHighLow(temp) { + let tempArr = { + temp_low: 1000, + temp_high: 0, + high_icon: '', + low_icon: '', + }; + temp.data.map(x => { + if (x.main.temp_max > tempArr.temp_high) { + tempArr.temp_high = x.main.temp_max; + tempArr.high_icon = ``; + } + if (x.main.temp_min < tempArr.temp_low) { + tempArr.temp_low = x.main.temp_min; + tempArr.low_icon = ``; + } + }); + return tempArr; + } + function display(data) { + $('.temp').empty(); + data.map(newDiv => { + $('.temp').append( + `
+
+ ${moment(newDiv.time).format('ddd')} ${ + getHighLow(newDiv).high_icon + } Low: ${getHighLow(newDiv).temp_low} High: ${ + getHighLow(newDiv).temp_high + } +
+
` + ); + }); + } - - - -} \ No newline at end of file + display(days); + }); +} diff --git a/index.html b/index.html index 12f4bdf..0885dab 100644 --- a/index.html +++ b/index.html @@ -1,272 +1,319 @@ + + + + Destinator + + + + + + - - - - Destinator - - - - - + + +
- +
+ +
+
+
+
+

+ THE +
DESTINATOR +

+
+
+
+ +
+ +
+ +
- - -
+ +
+ -
- -
-
+
+
+
+
+

5 Day Forecast

+

+
+
+
+
+
+
+ +
+
+
+ +
+ +
+
+
+ +
+
+
+
-
-
-
-

- THE -
DESTINATOR

-
-
-
- -
- -
- -
+ +
+ +
+ +
+ +
+ +
+ +
-
+
+
+
+
+
+
- -
- +
+
+ + + + + + + + + + + + + + + + + + + + + +
Address:
Telephone:
Rating:
Website:
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+ + + +
+
+
+
+ +
-
-
-
-
-

5 Day Forecast

-

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
- -
- -
-
-
- -
+ +
+
+
+
+
+ +
Contact Us
+ + + + + +
+
+
+
- -
-
+ +
+ +
+ +

Adam F.

+ + +

Calvin W.

+ + +

Jesse L.

+ + +

Kerry T.

+ +
+

...You'll be back

+
+
- -
- -
- -
- -
- -
- -
- - -
-
-
-
-
- -
- -
-
- - - - - - - - - - - - - - - - - - - - - -
Address:
Telephone:
Rating:
Website:
- -
-
-
-
-
-
- -
-
-
-
-
-
- -
-
- -
- - - -
-
-
-
- -
- - -
-
-
- -
-
-
-
-
Contact Us
- - - - -
-
-
-
-
- - - - - -
- -
- -

Adam F.

- - -

Calvin W.

- - -

Jesse L.

- - -

Kerry T.

- -
-

...You'll be back

-
-
- - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + +