Ibrahim

src/App.css

@@ -1,4 +1,4 @@
-.app {
+/*app {
   height: 100vh;
   width: 100vw;
   transition: background-color 1s ease-in;
@@ -19,7 +19,99 @@
 /*  Search bar */
 
 /* Current weather */
-
+/*
 div {
   border: 5px solid red;
 }
+*/
+*{
+  font-family: 'Raleway','sans-serif';
+}
+body{
+  margin:0;
+}
+header{
+  background-color: #759eda;
+  display: flex;
+ height: 120px;
+ align-items: center;
+ align-content: flex-end;
+}
+button,input{
+  margin-top: 10px;
+margin-left: 20px;
+
+}
+main{
+  width: 100%;
+}
+input{
+  border: none;
+  background-color: transparent;
+}
+input:focus{
+border: none;
+outline: none;
+border-bottom: 1px solid black;
+}
+button{
+  height: 50px;
+  background-color: #5979ce;
+  border: none;
+
+}
+.oc{
+  color: white;
+  font-weight: bold;
+  font-size: 20px;
+}
+.img1 span{
+font-weight: bold;
+}
+.temperature{ 
+  color: #0F1D4D;
+}
+.main{
+  background-color: #9ccef4;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+/* .img1 img{
+  width:40%;
+} */
+.img1,p{
+  text-align: center
+}
+
+.transspan{
+ opacity: 0.5;
+}
+.weath img{
+  width: 100px;
+  height: 100px;
+}
+.weath{
+  text-align: center;
+  margin:10px;
+  padding-bottom: 20px;
+}
+.container{
+  display: flex;
+  width: 100%;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+@media  (max-width:446px) {
+header{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-content: flex-start;
+}
+
+
+}
+
+
+

src/App.js

@@ -1,30 +1,50 @@
 import React, { Component } from "react";
+
+//Components
+import WeatherList from "./components/WeatherList";
 import Search from "./components/Search";
+import WeatherNow from "./components/WeatherNow";
+
+//Style
+import "./App.css";
 
-import SayHi, { SayHello } from "./components/WeatherItem";
+//Json 
 import fakeWeatherData from "./fakeWeatherData.json";
 
-import "./App.css";
+//Images
+import storm from "./img/weather-icons/storm.svg";
+import clear from "./img/weather-icons/clear.svg";
+import cloudy from "./img/weather-icons/cloudy.svg";
+import drizzle from "./img/weather-icons/drizzle.svg";
+import fog from "./img/weather-icons/fog.svg";
+import mostlycloudy from "./img/weather-icons/mostlycloudy.svg";
+import partlycloudy from "./img/weather-icons/partlycloudy.svg";
+import rain from "./img/weather-icons/rain.svg";
+import snow from "./img/weather-icons/snow.svg";
+
 
 class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      name: "Karim"
+
     };
   }
 
-  handleInputChange = value => {
-    this.setState({ name: value });
-  };
-
   render() {
+    console.log(fakeWeatherData.list[4].weather[0].main);
+
     return (
+
       <div className="app">
-        <SayHi />
-        <SayHello color="black" name={this.state.name} />
-        <Search handleInput={this.handleInputChange} />
+
+        <Search />
+        <div className="main">
+          <WeatherNow source={fakeWeatherData.list[4].weather[0].main} from="10℃" to="11℃" humudity="78%" pressure="1008.8" />
+          <WeatherList fakeWeatherData={fakeWeatherData.list} />
+        </div>
       </div>
+
     );
   }
 }

src/components/Search.css

@@ -1,3 +1,3 @@
-div {
+/* div {
     border: 25px solid black;
-}
+} */

src/components/Search.js

@@ -1,15 +1,14 @@
 import React from "react";
 
 import clear from "../img/weather-icons/clear.svg";
-import "./Search.css";
 class Search extends React.Component {
   state = {
     input: ""
   };
 
   render() {
     return (
-      <div>
+      /*<div>
         {this.state.input}
         <input
           type="text"
@@ -25,7 +24,12 @@ class Search extends React.Component {
         >
           Say Hello
         </button>
-      </div>
+      </div>*/
+      <header>
+          <div className="input">
+            <input type="search" name="search" placeholder="Search City" /></div>
+          <div><button>find weather</button></div>
+        </header>
     );
   }
 }

src/components/SingleWeather.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import storm from "../img/weather-icons/storm.svg";
+import clear from "../img/weather-icons/clear.svg";
+import cloudy from "../img/weather-icons/cloudy.svg";
+import drizzle from "../img/weather-icons/drizzle.svg";
+import fog from "../img/weather-icons/fog.svg";
+import mostlycloudy from "../img/weather-icons/mostlycloudy.svg";
+import partlycloudy from "../img/weather-icons/partlycloudy.svg";
+import rain from "../img/weather-icons/rain.svg";
+import snow from "../img/weather-icons/snow.svg";
+
+class SingleWeather extends Component {
+    render() {
+        const checkWeather = () =>{
+            let ibrahim = '';
+              switch (this.props.source) {
+                case 'Clear':
+                  ibrahim = clear;
+                  break;
+                case 'Clouds':
+                  ibrahim = cloudy;
+                  break;
+                case 'Rain':
+                  ibrahim = rain;
+                  break;
+              }
+              console.log(ibrahim)
+              return ibrahim
+          }
+        return (
+
+            <div>
+                <div className="weath">
+                    <p>{this.props.time}</p>
+                    <img src={checkWeather()} alt="storm icon" />              
+                    <p>{this.props.temperature}</p>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default SingleWeather

src/components/WeatherList.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react'
+import storm from "../img/weather-icons/storm.svg";
+import clear from "../img/weather-icons/clear.svg";
+import cloudy from "../img/weather-icons/cloudy.svg";
+import drizzle from "../img/weather-icons/drizzle.svg";
+import fog from "../img/weather-icons/fog.svg";
+import mostlycloudy from "../img/weather-icons/mostlycloudy.svg";
+import partlycloudy from "../img/weather-icons/partlycloudy.svg";
+import rain from "../img/weather-icons/rain.svg";
+import snow from "../img/weather-icons/snow.svg";
+import SingleWeather from './SingleWeather';
+
+class WeatherList extends Component {
+  render() {
+
+    let listOfWeather=this.props.fakeWeatherData.slice(1,8);
+
+    return (
+
+      <div className="container">
+        {
+        listOfWeather.map(x=>{
+          return(
+          <SingleWeather time={x.dt_txt.split(' ')[1]} source={x.weather[0].main} temperature={x.main.temp_kf}/> 
+          )
+        })}  
+      </div>
+    )
+  }
+}
+
+export default WeatherList

src/components/WeatherNow.js

@@ -0,0 +1,42 @@
+import React, { Component } from 'react'
+/*import PropTypes from 'prop-types'*/
+import storm from "../img/weather-icons/storm.svg"
+import clear from "../img/weather-icons/clear.svg";
+import cloudy from "../img/weather-icons/cloudy.svg";
+import drizzle from "../img/weather-icons/drizzle.svg";
+import fog from "../img/weather-icons/fog.svg";
+import mostlycloudy from "../img/weather-icons/mostlycloudy.svg";
+import partlycloudy from "../img/weather-icons/partlycloudy.svg";
+import rain from "../img/weather-icons/rain.svg";
+import snow from "../img/weather-icons/snow.svg";
+
+export class WeatherNow extends Component {
+    static propTypes = {
+
+    }
+
+    render() {
+        let ibrahim = '';
+        switch (this.props.source) {
+          case 'Cleare':
+            ibrahim = clear;
+            break;
+          case 'Clouds':
+            ibrahim = cloudy;
+            break;
+          case 'Rain':
+            ibrahim = rain;
+            break;
+        }
+        return (
+
+                <div className="img1"><img src={ibrahim} alt="storm icon" />
+                    <p className="oc">overcast cloud</p>
+                    <p className="temperature"><span>Temperature &nbsp;</span> {this.props.from} <span> &nbsp;to </span> &nbsp; {this.props.to} </p>
+                    <p className="temperature"><span>Humidity &nbsp;</span> {this.props.humudity}&nbsp;<span >  Pressure  </span> &nbsp;{this.props.pressure}</p>
+                </div>
+            )
+    }
+}
+
+export default WeatherNow