Dana allam

src/App.css

@@ -1,25 +1,90 @@
-.app {
-  height: 100vh;
-  width: 100vw;
-  transition: background-color 1s ease-in;
+*{
+  font-family: "Raleway", sans-serif;
+}
+
+.app__header{
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  padding: 20px;
+  background-color: #759EDA;
+  transition: all 2s;
 }
 
-.app__header,
-.app__main {
-  width: 100%;
+.app__main{
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 20px;
-  font-family: "Raleway", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
-/*  Search bar */
+.app__main img{
+  width: 150px;
+  height: auto;
+  transition: all 0.5s;
+}
 
-/* Current weather */
+.app__main img:hover{
+  width: 220px;
+}
+
+.app__main p:first-of-type{
+  font-size: x-large;
+}
+
+.app__main p:last-child{
+  word-spacing: 25px;
+}
+
+.btn{
+  margin-left: 2%;
+  background-color: #5879C7;
+  border: none;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  font-size: 16px;
+  border-radius: 5px;
+  transition: all 1.5s;
+}
 
-div {
-  border: 5px solid red;
+.btn:hover{
+  border-radius: 30px;
 }
+
+input {
+  margin-top: 5px;
+  padding-bottom: 10px; 
+  background-color: #759EDA;
+  font-size: 24px;
+  color: white;
+  border: none;
+}
+
+input:focus{
+  outline: none;
+  border-bottom: 1px solid #655bc9;
+}
+
+h2{
+  color: white;
+  padding: 0;
+}
+
+.hourly{
+  display: flex;
+  justify-content: center;
+}
+
+.hourly div{
+  margin-right: 1%;
+  text-align: center;
+}
+
+.hourly img{
+  width: 85px;
+  transition: all 0.5s;
+}
+
+.hourly img:hover{
+  width: 95px;
+}

src/App.js

@@ -1,32 +1,48 @@
 import React, { Component } from "react";
-import Search from "./components/Search";
-
-import SayHi, { SayHello } from "./components/WeatherItem";
+import Header from "./components/Header";
+import Main from "./components/Main";
+import Hourly from "./components/Hourly";
 import fakeWeatherData from "./fakeWeatherData.json";
-
+import mostlycloudy from "./img/weather-icons/mostlycloudy.svg";
+import rain from "./img/weather-icons/rain.svg";
+import clouds from "./img/weather-icons/cloudy.svg";
+import sunny from "./img/weather-icons/storm.svg";
+import storm from "./img/weather-icons/fog.svg";
+import fog from "./img/weather-icons/clear.svg";
+import drizzle from "./img/weather-icons/drizzle.svg";
+import partlycloudy from "./img/weather-icons/partlycloudy.svg";
+import snow from "./img/weather-icons/snow.svg";
 import "./App.css";
 
 class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      name: "Karim"
-    };
-  }
+  render() {
 
-  handleInputChange = value => {
-    this.setState({ name: value });
-  };
 
-  render() {
+    function returnImage(id, Storms) {
+      if (id < 300) return storm;
+      else if (id > 300 && id <= 499) return drizzle;
+      else if (id >= 500 && id <= 599) return rain;
+      else if (id >= 600 && id <= 699) return snow;
+      else if (id >= 700 && id <= 799) return fog;
+      else if (id == 800) return sunny;
+      else if (id == 801) return partlycloudy;
+      else if (id > 801 && id <= 805) return 	mostlycloudy;
+      else if (id > 805) return clouds;
+    }
+
+    const weather = fakeWeatherData.list;
+    // console.log("dana", weather[0].weather[0].main.toLowerCase());
+    // for (let i = 0; i < weather.length; i++) {
+    //   console.log(weather[i].main.temp);
+    // }
     return (
       <div className="app">
-        <SayHi />
-        <SayHello color="black" name={this.state.name} />
-        <Search handleInput={this.handleInputChange} />
+        <Header data={fakeWeatherData.city.name} />
+        <Main data={weather} />
+        <Hourly data={weather} />
       </div>
     );
   }
 }
 
-export default App;
+export default App;

src/components/Header.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const Header = (props) => {
+    return (
+        <div className="app__header">
+            <input type="text" defaultValue={props.data}/>
+            <button className="btn">FIND WEATHER</button>
+        </div>
+    )
+}
+
+export default Header

src/components/Hourly.js

@@ -0,0 +1,34 @@
+import React from "react";
+import mostlycloudy from "../img/weather-icons/mostlycloudy.svg";
+import clear from "../img/weather-icons/clear.svg";
+import clouds from "../img/weather-icons/cloudy.svg";
+import rain from "../img/weather-icons/rain.svg";
+
+const Hourly = ({ data }) => {
+  var image;
+  return (
+    <div className="hourly">
+      {data.slice(1, 8).map((post, i) => {
+        if(post.weather[0].main.toLowerCase()=="clear"){
+          image=clear;
+        }
+        if(post.weather[0].main.toLowerCase()=="clouds"){
+          image=clouds;
+        }
+        if(post.weather[0].main.toLowerCase()=="rain"){
+          image=rain;
+        }
+        return (
+          <div key={i}>
+            {/* console.log({i}); */}
+            <p>{post.dt_txt.substring(11, 16)}</p>
+            <img src={image} alt={post.weather[0].main.toLowerCase()+" icon"} />
+            <p>{Math.round(post.main.temp - 273.15)}&#186;C</p>
+          </div>
+        );
+        })}
+    </div>
+  );
+};
+
+export default Hourly;

src/components/Main.js

@@ -0,0 +1,23 @@
+import React from "react";
+import clear from "../img/weather-icons/clear.svg";
+
+const Main = (props) => {
+  // console.log("titi", props);
+  return (
+    <div className="app__main">
+      <img src={clear} alt="clear icon" />
+      <h2>overcast clouds</h2>
+      <div className="desc">
+        <p>
+          <b>Temperature</b> {Math.round(props.data[0].main.temp_min - 273.15)}
+          &#186;C to {Math.round(props.data[0].main.temp_max - 273.15)}&#186;C
+        </p>
+        <p>
+          <b>Humidity</b> {props.data[0].main.humidity}% <b>Pressure</b> {props.data[0].main.pressure}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Main;

src/index.css

@@ -1,4 +1,4 @@
 body {
-  margin: 40px;
-
-}
+  margin: 0;
+  background-color: #9CCEF4;
+}