Agha

src/App.css

@@ -1,25 +1,115 @@
-.app {
-  height: 100vh;
-  width: 100vw;
-  transition: background-color 1s ease-in;
+*{
+  font-family: "Raleway", sans-serif;
+  background-color: #9CCDF4;
+}
+
+header{
+  background-color: #759eda;
+  padding: 1.4%;
+  display: flex;
+
+}
+
+input{
+  font-family:'Raleway', sans-serif;
+  border: none;
+  background-color:#759EDA;
+  margin-left: 1%;
+  font-size: x-large;
+  color: white;   
+  outline: none;
+}
+::placeholder{   
+  color: white;
+opacity: 0.5;
+}  
+  input:focus{   
+  border-bottom: 2px solid #5879C7; 
+}
+#city-name{
+  padding: 0.5%;
+}
+
+.find-weather{
+  font-size: x-large;
+  background-color: #5879c7;
+  padding: 1%;
+  margin-left: 3%;
+  border: none;
+}
+body{
+  margin: 0;
+  background-color: #9ccef4;
+}
+.mostly-cloudy{
+  width: 14%;
 }
+.img-mc{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    /* background-color: red; */
+}
+.mc-text{
+  color: white;
+  margin-top: -0.5%;
+  font-size: 25px;
+}
+  .temp-data p{
+  font-size: x-large;
+  display: flex;
+  justify-content: center;
 
-.app__header,
-.app__main {
-  width: 100%;
+}
+.humidity-pressure{
+  /* background-color: aqua; */
+  font-family:'Raleway', sans-serif;
+  font-size: medium;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.daily-weather img{
+  width: 50%;
+  }
+footer{
+ margin: auto;
+  width: 80%;
+  font-family:'Raleway', sans-serif;
+  display: flex;
+  flex-direction: row;
+  margin-top: 5%;
+  justify-content: space-around;
+}
+.daily-weather{
   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 */
 
-/* Current weather */
+@media (  max-width: 678px) {
+
+  header{
+    display: flex;
+    flex-direction: column;
+  }
+  .find-weather{
+    margin-top: 10px;
+    margin-left: 0px;
+  }
+
+  footer{
+    display: grid;
+grid-template-columns: 1fr 1fr;  }
+
+  .mostly-cloudy{
+    width: 40%;
+  }
 
-div {
-  border: 5px solid red;
+  .daily-weather{
+    margin-bottom: 5%;
+  }
 }

src/App.js

@@ -1,32 +1,72 @@
 import React, { Component } from "react";
+import mc from "./img/weather-icons/mostlycloudy.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 pc from "./img/weather-icons/partlycloudy.svg";
+import rain from "./img/weather-icons/rain.svg";
+import snow from "./img/weather-icons/snow.svg";
+import storm from "./img/weather-icons/storm.svg";
+import unknown from "./img/weather-icons/unknown.svg";
 import Search from "./components/Search";
 
+
+
+import Header from "./Header";
+import Main from "./Main";
+import Footer from "./Footer";
 import SayHi, { SayHello } from "./components/WeatherItem";
 import fakeWeatherData from "./fakeWeatherData.json";
 
 import "./App.css";
 
 class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      name: "Karim"
-    };
-  }
-
-  handleInputChange = value => {
-    this.setState({ name: value });
-  };
+  // constructor(props) {
+  //   super(props);
+  //   this.state = {
+  //     name: "alialahmad_MohammadAlAgha"
+  //   };
+  // }
 
+  // handleInputChange = value => {
+  //   this.setState({ name: value });
+  // };
   render() {
     return (
-      <div className="app">
-        <SayHi />
-        <SayHello color="black" name={this.state.name} />
-        <Search handleInput={this.handleInputChange} />
-      </div>
+      // <div className="app">
+      //   /* <SayHi />
+      //   <SayHello color="black" name={this.state.name} />
+      //   <Search handleInput={this.handleInputChange} /> */
+      // </div>
+
+
+      // <div> alialahmad_MohammadAlAgha</div>
+        <div>
+      <Header />
+      <Main />
+      <Footer />
+
+
+        </div>
+
     );
+
+
+      ;
+    }
   }
-}
 
 export default App;
+
+{/* <img src={mc}/>
+<p>09:00</p>
+<img src={mc}/>
+<p>12:00</p>
+<img src={mc}/>
+<p>15:00</p>
+<img src={mc}/>
+<p>18:00</p>
+<img src={mc}/>
+<p>21:00</p>
+<img src={mc}/> */}

src/Footer.js

@@ -0,0 +1,46 @@
+import React, { Component } from "react";
+import mc from "./img/weather-icons/mostlycloudy.svg"
+import clear from "./img/weather-icons/clear.svg";
+const Footer = () => {
+    return (
+        <footer> 
+        <div className="daily-weather">
+          <p>03:00</p>
+          <img src={mc}/>
+          <p>8&deg;C</p>
+        </div>
+        <div className="daily-weather">
+          <p>06:00</p>
+          <img src={mc}/>
+          <p>9&deg;C</p>
+        </div>
+        <div className="daily-weather">
+          <p>09:00</p>
+          <img src={clear}/>
+          <p>14&deg;C</p>
+        </div>
+        <div className="daily-weather">
+          <p>12:00</p>
+          <img src={clear}/>
+          <p>17&deg;C</p>
+        </div>
+        <div className="daily-weather">
+          <p>15:00</p>
+          <img src={clear}/>
+          <p>18&deg;C</p>
+        </div>
+        <div className="daily-weather">
+          <p>18:00</p>
+          <img src={clear}/>
+          <p>16&deg;C</p>
+        </div>
+        <div className="daily-weather">
+          <p>21:00</p>
+          <img src={mc}/>
+          <p>13&deg;C</p>
+        </div>
+        </footer>
+    );
+  };
+
+  export default Footer;

src/Header.js

@@ -0,0 +1,16 @@
+import React, { Component } from "react";
+const Header = () => {
+  return (
+    <header>
+      <input
+        type="text"
+        placeholder="Type in a city name"
+        name="city-name"
+        id="city-name"
+      />
+      <button className="find-weather" onclick=""> FIND WEATHER</button>
+    </header>
+  );
+};
+
+export default Header;

src/Main.js

@@ -0,0 +1,22 @@
+import React, { Component } from "react";
+import mc from "./img/weather-icons/mostlycloudy.svg"
+const Main = () => {
+    return (
+        <main>
+        <div className="img-mc">
+          <img src={mc} className="mostly-cloudy" />
+          <h2 className="mc-text">overcast clouds</h2>
+        </div>
+        <div className="temp-data">
+          <p><b>Temperature&nbsp;</b>&nbsp;10&deg; to 11&deg;C</p>
+        </div>
+        <div className="humidity-pressure">
+          <p className="humidity"><b>Humidity&nbsp;</b>&nbsp;&nbsp;&nbsp;&nbsp;78%</p>
+          <p className="pressure"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pressure&nbsp;</b>&nbsp;&nbsp;&nbsp;&nbsp;1008.48</p>
+        </div>
+       </main>
+    );
+  };
+
+  export default Main;
+

src/components/Search.css

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

src/index.css

@@ -1,4 +1,4 @@
-body {
+/* body {
   margin: 40px;
 
-}
+} */