the end....

src/components/App.js

@@ -1,17 +1,119 @@
 import React from "react";
+import Photo from "./Photo";
+import Info from "./Info";
+import Thumbs from "./Thumbs";
+import Search from "./Search";
+import Header from "./Header";
+import { weatherApi, imagesApi } from "./apis";
 
 class App extends React.Component {
   constructor(props) {
-    super();
+    super(props);
 
-    // Use the props passed to App here (hint: look at ../index.js)
+    this.state = {
+      currentTypeCity: "",
+      currentCity: "London",
+      currentWeather: {
+        location: "",
+        description: "",
+        temp: {
+          current: "",
+          min: "",
+          max: ""
+        }
+      },
+      currentCityImages: [],
+      currentBackground: {
+        id: "",
+        description: "",
+        color: "",
+        user: {
+          name: "",
+          url: ""
+        },
+        image:
+          "https://images.unsplash.com/photo-1508711046474-2f4c2d3d30ca?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjI4ODk1fQ&s=fd58555505fbe94b05eb33ec5874fc5d"
+      }
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.receiveCity = this.receiveCity.bind(this);
+    this.getWeather = this.getWeather.bind(this);
+    this.getImages = this.getImages.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  getWeather(city) {
+    const { weather } = this.props.config.api;
+    weatherApi(city, weather.apiKey, weather.url)
+      .then(reply => this.setState({ currentWeather: reply }))
+      .catch(error => console.log(error));
+  }
+
+  getImages(city) {
+    const { unsplash } = this.props.config.api;
+    imagesApi(city, unsplash.apiKey, unsplash.url)
+      .then(result =>
+        this.setState({
+          currentCityImages: result,
+          currentBackground: result[0]
+        })
+      )
+      .catch(error => console.log(error));
+  }
+
+  componentDidMount() {
+    const { weather } = this.props.config.api;
+    this.getWeather(this.state.currentCity);
+    this.getImages(this.state.currentCity);
+  }
+
+  receiveCity(currentCityFromSearch) {
+    this.setState({ currentCity: currentCityFromSearch }, () => {
+      this.getWeather(this.state.currentCity);
+      this.getImages(this.state.currentCity);
+    });
+  }
+  handleChange(event) {
+    this.setState({ currentTypeCity: event.target.value });
+  }
+  handleSubmit(event) {
+    event.preventDefault();
+    this.receiveCity(this.state.currentTypeCity);
+  }
+
+  handleClick(event, thumbnailData) {
+    event.preventDefault();
+    this.setState({ currentBackground: thumbnailData });
   }
 
   render() {
-    return "hello world!";
+    return (
+      <main
+        className="content"
+        style={{ backgroundColor: `${this.state.currentBackground.color}` }}
+      >
+        <Header />
+        <Photo data={this.state.currentBackground} />
+        <Info
+          description={this.state.currentWeather.description}
+          temp={this.state.currentWeather.temp}
+          currentCity={this.state.currentCity}
+          user={this.state.currentBackground.user}
+        />
+        <Thumbs
+          photos={this.state.currentCityImages}
+          handleClick={this.handleClick}
+        />
+        <Search
+          handleChange={this.handleChange}
+          handleSubmit={this.handleSubmit}
+          currentCity={this.state.currentTypeCity}
+        />
+      </main>
+    );
   }
 }
 
-App.defaultProps = {};
-
 export default App;

src/components/Header.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+export default function Header(props) {
+  return (
+    <header className="header">
+      <h1 className="title">
+        <i>Meteor</i>
+        <i>oplis</i>
+      </h1>
+    </header>
+  );
+}

src/components/Info.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+function convertToCel(temp) {
+  return Math.round(temp - 273.15);
+}
+
+export default function Info(props) {
+  return (
+    <div className="info">
+      <p className="info__item info__item--conditions">
+        {props.description} in {props.currentCity}, current temperature is{" "}
+        {convertToCel(props.temp.current)}°C
+      </p>
+      <p className="info__item info__item--credits">
+        <a href={props.user.url}> {props.user.name} </a>
+        <span> on </span>
+        <a href="https://unsplash.com"> Unsplash </a>
+      </p>
+    </div>
+  );
+}

src/components/Photo.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+function Photo(props) {
+  return (
+    <figure className="photo">
+      <img src={props.data.image} alt="" />
+    </figure>
+  );
+}
+
+export default Photo;

src/components/Search.js

@@ -0,0 +1,25 @@
+import React from "react";
+
+function Search (props){
+    return (
+      <div className="controls">
+        <form
+          className="search"
+          onSubmit={props.handleSubmit}
+          >
+          <label className="search__label">City</label>
+          <input
+            onChange={props.handleChange}
+            value={props.currentCity}
+            className="search__input"
+            name="city"
+            placeholder="Enter city name"
+            autoComplete="city"
+          />
+          <button className="btn search__btn"> Go </button>
+        </form>
+      </div>
+    );
+  };
+
+export default Search;

src/components/Thumbnails.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+export default function Thumbnails(props) {
+  return (
+    <a href={props.data.image}
+      className="thumbs__link active"
+      onClick={(event) => props.handleClick(event, props.data)}
+      >
+      <img
+        src={props.data.thumb}
+        alt={props.data.description}
+        className="thumbs__link__img"
+      />
+    </a>
+  );
+}

src/components/Thumbs.js

@@ -0,0 +1,18 @@
+import React from "react";
+import Thumbnails from "./Thumbnails";
+
+export default function Thumbs(props) {
+  return (
+    <div className="thumbs">
+      {props.photos.map(function(thumb) {
+        return (
+          <Thumbnails
+            key={thumb.id}
+            data={thumb}
+            handleClick={props.handleClick}
+          />
+        );
+      })}
+    </div>
+  );
+}

src/components/apis.js

@@ -0,0 +1,37 @@
+export const weatherApi = (city, apiKey, url) => {
+  return fetch(`${url}?q=${city}&APPID=${apiKey}`)
+    .then(response => response.json())
+    .then(data => {
+      return {
+        location: data.name,
+        description: data.weather[0].description,
+        temp: {
+          current: data.main.temp,
+          min: data.main.temp_min,
+          max: data.main.temp_max
+        }
+      };
+    });
+};
+
+export function imagesApi(city, apiKey, url) {
+  const fetchUrl = `${url}?query=${city}&client_id=${apiKey}`;
+
+  return fetch(fetchUrl)
+    .then(response => response.json())
+    .then(data => {
+      return data.results.map(function(image) {
+        return {
+          id: image.id,
+          description: image.description,
+          color: image.color,
+          image: image.urls.regular,
+          thumb: image.urls.thumb,
+          user: {
+            name: image.user.name,
+            url: image.user.links.self
+          }
+        };
+      });
+    });
+}

src/index.js

@@ -6,12 +6,12 @@ import App from "./components/App";
 const config = {
   api: {
     weather: {
-      apiKey: "YOUR_API_KEY",
+      apiKey: "c35ab95f79543c0b61bd103e6727ff56",
       city: "London",
       url: "https://api.openweathermap.org/data/2.5/weather"
     },
     unsplash: {
-      apiKey: "YOUR_API_KEY",
+      apiKey: "f685c677520cae68e71ed6aab8dd7505eb31b24ec90d2d97531e0f7c6507a189",
       url: "https://api.unsplash.com/search/photos"
     }
   }