forecast page finished

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

src/Day.js

@@ -0,0 +1,11 @@
+import React, {Component} from 'react';
+
+class Day extends Component {
+    render() {
+        return (
+
+        )
+    }
+}
+
+export default Day;

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 (
+        <div className="day-item">
+            <img className="day-pic" src={require("./img/weather-icons/" + pic + ".svg")} alt="" />
+            <p className="day-title">{dateHelper.convertTimestamp(date)}</p>
+        </div>
+    )
+}
 
 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 (
-
-
             <div className="container">
-                {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))} */}
+                <div className="day-container">
+                    {weather.map(function(day) {
+                        return <Day day={day}/>
+                    }, this)}
+                </div>
+
             </div>
         )
     }