From 903f9f303f69ace77ff01376d81c9b98de36da22 Mon Sep 17 00:00:00 2001 From: Ben Date: Sun, 13 Jan 2019 20:27:50 -0800 Subject: [PATCH] forecast page finished --- src/App.css | 35 ++++++++++++++++++++++- src/Day.js | 11 ++++++++ src/Forecast.js | 46 ++++++++++++++++++++++++++---- src/img/weather-icons/01d.svg | 28 ++++++++++++++++++ src/img/weather-icons/01n.svg | 11 ++++++++ src/img/weather-icons/02d.svg | 28 ++++++++++++++++++ src/img/weather-icons/02n.svg | 16 +++++++++++ src/img/weather-icons/03d.svg | 13 +++++++++ src/img/weather-icons/03n.svg | 10 +++++++ src/img/weather-icons/04d.svg | 17 +++++++++++ src/img/weather-icons/04n.svg | 10 +++++++ src/img/weather-icons/09d.svg | 26 +++++++++++++++++ src/img/weather-icons/09n.svg | 53 +++++++++++++++++++++++++++++++++++ src/img/weather-icons/10d.svg | 43 ++++++++++++++++++++++++++++ src/img/weather-icons/10n.svg | 36 ++++++++++++++++++++++++ src/img/weather-icons/11d.svg | 20 +++++++++++++ src/img/weather-icons/11n.svg | 24 ++++++++++++++++ src/img/weather-icons/13d.svg | 36 ++++++++++++++++++++++++ src/img/weather-icons/13n.svg | 50 +++++++++++++++++++++++++++++++++ src/img/weather-icons/50d.svg | 19 +++++++++++++ src/img/weather-icons/50n.svg | 27 ++++++++++++++++++ src/utils/api.js | 14 +++++++-- src/utils/dateHelper.js | 40 ++++++++++++++++++++++++++ 23 files changed, 605 insertions(+), 8 deletions(-) create mode 100644 src/Day.js create mode 100755 src/img/weather-icons/01d.svg create mode 100755 src/img/weather-icons/01n.svg create mode 100755 src/img/weather-icons/02d.svg create mode 100755 src/img/weather-icons/02n.svg create mode 100755 src/img/weather-icons/03d.svg create mode 100755 src/img/weather-icons/03n.svg create mode 100755 src/img/weather-icons/04d.svg create mode 100755 src/img/weather-icons/04n.svg create mode 100755 src/img/weather-icons/09d.svg create mode 100755 src/img/weather-icons/09n.svg create mode 100755 src/img/weather-icons/10d.svg create mode 100755 src/img/weather-icons/10n.svg create mode 100755 src/img/weather-icons/11d.svg create mode 100755 src/img/weather-icons/11n.svg create mode 100755 src/img/weather-icons/13d.svg create mode 100755 src/img/weather-icons/13n.svg create mode 100755 src/img/weather-icons/50d.svg create mode 100755 src/img/weather-icons/50n.svg create mode 100644 src/utils/dateHelper.js diff --git a/src/App.css b/src/App.css index 93d6e40..6cc2f76 100755 --- a/src/App.css +++ b/src/App.css @@ -11,10 +11,13 @@ html { body { box-sizing: border-box; font-size: 1.6rem; + font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; + } .App { - background: linear-gradient(to left, #f2fcfe, #1c92d2); + /* background: linear-gradient(to left, #f2fcfe, #1c92d2); */ + /* background: yellow; */ min-height: 100vh; } /* HEADER */ @@ -92,3 +95,33 @@ header { color: white; /* margin: 0 auto; */ } + +/* Forecast */ +/* Forecast */ +/* Forecast */ + +.day-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; +} + +.day-item { + flex-direction: column; + padding: 50px; + justify-content: center; + align-items: center; +} + +.day-pic { + display: block; + margin: 0 auto; + height: 100px; +} + +.day-title { + display: flex; + font-size: 28px; + font-weight: 300; +} diff --git a/src/Day.js b/src/Day.js new file mode 100644 index 0000000..b1ea6a1 --- /dev/null +++ b/src/Day.js @@ -0,0 +1,11 @@ +import React, {Component} from 'react'; + +class Day extends Component { + render() { + return ( + + ) + } +} + +export default Day; diff --git a/src/Forecast.js b/src/Forecast.js index 7e0f376..0f24401 100644 --- a/src/Forecast.js +++ b/src/Forecast.js @@ -1,7 +1,19 @@ import React, { Component } from 'react'; import queryString from 'query-string'; // components -import api from './utils/api'; +import api from './utils/api'; +import dateHelper from './utils/dateHelper'; + +const Day = (props) => { + var date = props.day.dt; + var pic = props.day.weather["0"].icon; + return ( +
+ +

{dateHelper.convertTimestamp(date)}

+
+ ) +} class Forecast extends Component { constructor(props) { @@ -31,12 +43,22 @@ class Forecast extends Component { return { error: null, location: location["city"], - weather: results.list["0"], + weather: results.list, loading: false, } }); }.bind(this)); } + + // handleClick(location) { + // console.log(JSON.stringify(location)); + // + // this.props.history.push({ + // pathname: 'forecast', + // search: '?city=' + location, + // }); + // } + render() { var error = this.state.error; var location = this.state.location; @@ -56,10 +78,24 @@ class Forecast extends Component { } return ( - -
- {JSON.stringify(weather)} + {JSON.stringify(weather["0"])} + {/* {JSON.stringify(weather["0"])} */} + {/* {JSON.stringify(dateHelper.convertTimestamp(weather[0].dt))} + {JSON.stringify(dateHelper.convertTimestamp(weather[1].dt))} + {JSON.stringify(dateHelper.convertTimestamp(weather[2].dt))} + {JSON.stringify(dateHelper.convertTimestamp(weather[3].dt))} + {JSON.stringify(dateHelper.convertTimestamp(weather[4].dt))} + {JSON.stringify(dateHelper.convertTimestamp(weather[5].dt))} + {JSON.stringify(dateHelper.convertTimestamp(weather[6].dt))} + {JSON.stringify(dateHelper.convertTimestamp(weather[7].dt))} + {JSON.stringify(dateHelper.convertTimestamp(weather[8].dt))} */} +
+ {weather.map(function(day) { + return + }, this)} +
+
) } diff --git a/src/img/weather-icons/01d.svg b/src/img/weather-icons/01d.svg new file mode 100755 index 0000000..a98c082 --- /dev/null +++ b/src/img/weather-icons/01d.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + diff --git a/src/img/weather-icons/01n.svg b/src/img/weather-icons/01n.svg new file mode 100755 index 0000000..52b8444 --- /dev/null +++ b/src/img/weather-icons/01n.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/src/img/weather-icons/02d.svg b/src/img/weather-icons/02d.svg new file mode 100755 index 0000000..9fcd83c --- /dev/null +++ b/src/img/weather-icons/02d.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + diff --git a/src/img/weather-icons/02n.svg b/src/img/weather-icons/02n.svg new file mode 100755 index 0000000..e8cbc60 --- /dev/null +++ b/src/img/weather-icons/02n.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/src/img/weather-icons/03d.svg b/src/img/weather-icons/03d.svg new file mode 100755 index 0000000..995827f --- /dev/null +++ b/src/img/weather-icons/03d.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/src/img/weather-icons/03n.svg b/src/img/weather-icons/03n.svg new file mode 100755 index 0000000..852ea90 --- /dev/null +++ b/src/img/weather-icons/03n.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/src/img/weather-icons/04d.svg b/src/img/weather-icons/04d.svg new file mode 100755 index 0000000..5bfe23f --- /dev/null +++ b/src/img/weather-icons/04d.svg @@ -0,0 +1,17 @@ + + + + + + diff --git a/src/img/weather-icons/04n.svg b/src/img/weather-icons/04n.svg new file mode 100755 index 0000000..852ea90 --- /dev/null +++ b/src/img/weather-icons/04n.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/src/img/weather-icons/09d.svg b/src/img/weather-icons/09d.svg new file mode 100755 index 0000000..9be5a7b --- /dev/null +++ b/src/img/weather-icons/09d.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + diff --git a/src/img/weather-icons/09n.svg b/src/img/weather-icons/09n.svg new file mode 100755 index 0000000..8b9b441 --- /dev/null +++ b/src/img/weather-icons/09n.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/img/weather-icons/10d.svg b/src/img/weather-icons/10d.svg new file mode 100755 index 0000000..2669a08 --- /dev/null +++ b/src/img/weather-icons/10d.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/img/weather-icons/10n.svg b/src/img/weather-icons/10n.svg new file mode 100755 index 0000000..aa2854a --- /dev/null +++ b/src/img/weather-icons/10n.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + diff --git a/src/img/weather-icons/11d.svg b/src/img/weather-icons/11d.svg new file mode 100755 index 0000000..eba780b --- /dev/null +++ b/src/img/weather-icons/11d.svg @@ -0,0 +1,20 @@ + + + + + + + + + diff --git a/src/img/weather-icons/11n.svg b/src/img/weather-icons/11n.svg new file mode 100755 index 0000000..1cf6d52 --- /dev/null +++ b/src/img/weather-icons/11n.svg @@ -0,0 +1,24 @@ + + + + + + + + + diff --git a/src/img/weather-icons/13d.svg b/src/img/weather-icons/13d.svg new file mode 100755 index 0000000..1a2e93a --- /dev/null +++ b/src/img/weather-icons/13d.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + diff --git a/src/img/weather-icons/13n.svg b/src/img/weather-icons/13n.svg new file mode 100755 index 0000000..5def665 --- /dev/null +++ b/src/img/weather-icons/13n.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + diff --git a/src/img/weather-icons/50d.svg b/src/img/weather-icons/50d.svg new file mode 100755 index 0000000..a513ae7 --- /dev/null +++ b/src/img/weather-icons/50d.svg @@ -0,0 +1,19 @@ + + + + + + + + + + diff --git a/src/img/weather-icons/50n.svg b/src/img/weather-icons/50n.svg new file mode 100755 index 0000000..aec682e --- /dev/null +++ b/src/img/weather-icons/50n.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + diff --git a/src/utils/api.js b/src/utils/api.js index 6fb3275..1ea9ce6 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -1,9 +1,19 @@ var axios = require('axios'); var baseURL = "http://api.openweathermap.org/data/2.5/"; -var apikey = "8fad34166684286360dc6d77073bd5e5"; +var apikey = "b714ec74bbab5650795063cb0fdf5fbe"; +// var apikey = "8fad34166684286360dc6d77073bd5e5"; var params = "&APPID=" + apikey; +// function getQueryStringData (city) { +// return { +// q: city, +// type: 'accurate', +// APPID: apikey, +// cnt: 5 +// } +// } + module.exports = { fetchCurrentWeather: function(location) { var link = window.encodeURI(baseURL + "weather?q=" + location + params); @@ -16,7 +26,7 @@ module.exports = { }); }, fetchFiveDayForecast: function(location) { - var link = window.encodeURI(baseURL + "forecast?q=" + location + ",us" + params); + var link = window.encodeURI(baseURL + "forecast/daily?q=" + location + ",us" + "&cnt=5" + params); return axios.get(link) .then(function(results) { // console.log('forecast results: ' + results); diff --git a/src/utils/dateHelper.js b/src/utils/dateHelper.js new file mode 100644 index 0000000..491d110 --- /dev/null +++ b/src/utils/dateHelper.js @@ -0,0 +1,40 @@ +var months = [ + 'Jan', + 'Feb', + 'Mar', + 'Apr', + 'May', + 'Jun', + 'Jul', + 'Aug', + 'Sep', + 'Oct', + 'Nov', + 'Dec', +] + +var weeks = [ + 'Sunday', + 'Monday', + 'Tuesday', + 'Wednesday', + 'Thursday', + 'Friday', + 'Saturday', +] + +function convertTimestamp(timestamp) { + var d = new Date(timestamp * 1000); // convert timestamp to ms + + var year = d.getFullYear(); + var month = months[d.getMonth()]; + var week = weeks[d.getDay()]; + var day = d.getDate(); + // var hour = d.getHours(); + + return week + ', ' + month + ' ' + day; +} + +module.exports = { + convertTimestamp: convertTimestamp, +}