Teddy chalhoub

src/App.css

@@ -1,12 +1,18 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
 .app {
   height: 100vh;
   width: 100vw;
+  background-color: #9ccef4;
   transition: background-color 1s ease-in;
 }
 
 .app__header,
 .app__main {
-  width: 100%;
+  width: 80%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -18,8 +24,136 @@
 
 /*  Search bar */
 
+.search,
+input {
+  background-color: #769eda;
+  transition: background-color 1s ease-in;
+}
+
+.search {
+  padding: 1.5rem;
+
+}
+
+button,
+input {
+  border: 0;
+}
+
+button {
+  outline: none;
+  margin-left: 0.5rem;
+  background-color: #5879c7;
+  padding: 0.5rem;
+  font-family: "Raleway", sans-serif;
+}
+input::placeholder,
+input {
+  color: white;
+  font-family: "Raleway", sans-serif;
+}
+.temp__weather {
+  margin: auto;
+}
+
+input:focus {
+  outline: none;
+  border-bottom: 0.01rem black solid;
+  padding: 0.4rem 0.4rem 0.4rem 0;
+  font-family: "Raleway", sans-serif;
+  color: white;
+  place-content: "Type in a city name";
+}
+
 /* Current weather */
 
+.temp__text {
+  margin-bottom: 2rem;
+}
+
+.main__title {
+  color: white;
+}
+
+p {
+  text-align: center;
+  margin-top: 0;
+}
+
+.p__blue {
+  color: #091948;
+}
+
+.temp__per__hour {
+  display: grid;
+  grid-template-columns: repeat(7,8%);
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 2rem;
+}
+
+.temp__text__current {
+  margin-top: 3rem;
+}
+
+span {
+  margin: 0 0.5rem;
+}
+
+.temp__hour {
+  margin-top: 1rem;
+}
+
+.hourlyDisplay {
+  width: 70%;
+}
+
+.p__text__size {
+  font-size: 0.7rem;
+}
+
+.p__font__style {
+  font-weight: bold;
+}
+
+.weather__title {
+  margin: auto;
+  width: 9.375rem;
+  height: 9.375rem;
+}
+
 div {
-  border: 5px solid red;
+  /* border: 5px solid red; */
+}
+
+@media (max-width: 786px) {
+  .main__weather {
+    width: 50%;
+    margin: auto;
+  }
+
+  .temp__per__hour {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  button {
+    margin-top: 1rem;
+  }
+
+  .search {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .main__weather {
+    width: 70%;
+  }
+}
+
+@media (max-width: 300px) {
+  .div__up {
+    width: 100%;
+  }
 }

src/App.js

@@ -1,29 +1,89 @@
-import React, { Component } from "react";
+import React, { Component, useCallback } from "react";
 import Search from "./components/Search";
 
-import SayHi, { SayHello } from "./components/WeatherItem";
-import fakeWeatherData from "./fakeWeatherData.json";
-
 import "./App.css";
+import CurrentWeather from "./components/CurrentWeather";
+import HourlyWeather from "./components/HourlyWeather";
+
+const apiKey = "ad31fe76ffa44e4d13b1f2ab08969dc8";
 
 class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      name: "Karim"
-    };
+  state = {
+    name: "",
+    color: [],
+    color_search:[],
+    color_button:[],
+    data: [],
+  };
+
+  componentDidMount() {
+    fetch(
+      `http://api.openweathermap.org/data/2.5/forecast?q=${this.state.name}&cnt=8&units=metric&appid=${apiKey}`
+    )
+      .then((res) => res.json())
+      .then((values) => {
+        this.setState({ data: values });
+      });
   }
 
-  handleInputChange = value => {
+  componentDidUpdate(prevState) {
+    if (this.state.name !== prevState.name) {
+      fetch(
+        `http://api.openweathermap.org/data/2.5/forecast?q=${this.state.name}&cnt=8&units=metric&appid=${apiKey}`
+      )
+        .then((res) => res.json())
+        .then((values) => {
+          this.setState({ data: values });
+        });
+    }
+  }
+
+  handleInputChange = (value) => {
     this.setState({ name: value });
   };
 
   render() {
+    if (this.state.data.list !== undefined) {
+      this.state.color.splice(0, this.state.color.length);
+      this.state.color_search.splice(0, this.state.color_search.length);
+      const data = this.state.data.list.map((data) => {
+        const time = parseInt(data.dt_txt.slice(10, 14));
+        if (time == 0) {
+          const weatherValue = data.weather.map((data) => {
+            return [data.id, data.main, data.description];
+          });
+
+          if (weatherValue[0][0] >= 500 && weatherValue[0][0] < 599) {
+            this.state.color.push("#A1BAC1");
+            this.state.color_search.push("#6F81B1");
+            this.state.color_button.push("#5A6CAA");
+          } else if (weatherValue[0][0] == 800) {
+            this.state.color.push("#2590F1");
+            this.state.color_search.push("#256CB9");
+            this.state.color_button.push("#2358D1");
+          }
+        }
+      });
+    }
+
     return (
-      <div className="app">
-        <SayHi />
-        <SayHello color="black" name={this.state.name} />
-        <Search handleInput={this.handleInputChange} />
+      <div>
+        <div className="app" style={{ backgroundColor: this.state.color[0] }}>
+          <div className="search" style={{ backgroundColor: this.state.color_search[0] }}>
+            <Search handleInput={this.handleInputChange} colorSearch={this.state.color_search[0]} colorButton={this.state.color_button}/>
+          </div>
+          <div className="app__main temp__weather">
+            <div className="hourlyDisplay">
+              {this.state.data.list && (
+                <CurrentWeather data={this.state.data.list} />
+              )}
+
+              {this.state.data.list && (
+                <HourlyWeather hourlyData={this.state.data.list} />
+              )}
+            </div>
+          </div>
+        </div>
       </div>
     );
   }

src/components/CurrentWeather.js

@@ -0,0 +1,110 @@
+import React from "react";
+
+import Storm from "../img/weather-icons/storm.svg";
+import Drizzle from "../img/weather-icons/drizzle.svg";
+import Rain from "../img/weather-icons/rain.svg";
+import Snow from "../img/weather-icons/snow.svg";
+import Fog from "../img/weather-icons/fog.svg";
+import Clear from "../img/weather-icons/clear.svg";
+import PartlyCloudy from "../img/weather-icons/partlycloudy.svg";
+import MostlyCloudy from "../img/weather-icons/mostlycloudy.svg";
+
+import "../App.css";
+
+class CurrentWeather extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentWeatherData: [],
+      color_lila: [],
+    };
+  }
+
+  render() {
+
+
+
+    const humidity = [];
+    const pressure = [];
+    const temp_min = [];
+    const temp_max = [];
+    const weather = [];
+    const weatherDesc = [];
+    const images = [];
+
+    let color_search = "#9ccef4";
+
+    if (this.props.data !== undefined) {
+      this.state.currentWeatherData.splice(
+        0,
+        this.state.currentWeatherData.length
+      );
+
+      const data = this.props.data.map((data) => {
+        const time = parseInt(data.dt_txt.slice(10, 14));
+
+        if (time == 0) {
+          const weatherValue = data.weather.map((data) => {
+            return [data.id, data.main, data.description];
+          });
+          this.state.currentWeatherData.push({
+            humidity: data.main.humidity,
+            pressure: data.main.pressure,
+            temp_min: data.main.temp_min,
+            temp_max: data.main.temp_max,
+            weather: weatherValue[0][1],
+            weatherDesc: weatherValue[0][2],
+          });
+
+          if (weatherValue[0][0] < 300) {
+            images.push(Storm);
+          } else if (weatherValue[0][0] >= 300 && weatherValue[0][0] < 499) {
+            images.push(Drizzle);
+          } else if (weatherValue[0][0] >= 500 && weatherValue[0][0] < 599) {
+            images.push(Rain);
+          } else if (weatherValue[0][0] >= 600 && weatherValue[0][0] < 699) {
+            images.push(Snow);
+          } else if (weatherValue[0][0] >= 700 && weatherValue[0][0] < 799) {
+            images.push(Fog);
+          } else if (weatherValue[0][0] == 800) {
+            images.push(Clear);
+          } else if (weatherValue[0][0] == 801) {
+            images.push(PartlyCloudy);
+          } else if (weatherValue[0][0] > 801 && weatherValue[0][0] < 805) {
+            images.push(MostlyCloudy);
+          }
+        }
+      });
+    }
+
+    return (
+      <div>
+        {this.state.currentWeatherData &&
+          this.state.currentWeatherData.map((data) => {
+            humidity.push(data.humidity);
+            pressure.push(data.pressure);
+            temp_min.push(data.temp_min);
+            temp_max.push(data.temp_max);
+            weather.push(data.weather);
+            weatherDesc.push(data.weatherDesc);
+          })}
+        <div className="weather__title">
+          <img src={images[0]} />
+          <p className="main__title">{weatherDesc[0]}</p>
+        </div>
+        <div className="temp__text__current">
+          <p className="p__blue">
+            <span className="p__font__style">Temperature</span>{" "}
+            {Math.round(temp_min[0])}° to {Math.round(temp_max[0])}°C
+          </p>
+          <p className="p__blue p__text__size">
+            <span className="p__font__style">Humidity</span> {humidity[0]}%{" "}
+            <span className="p__font__style">Pressure</span> {pressure[0]}
+          </p>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default CurrentWeather;