Wouroud el khaldi jsx

src/App.css

@@ -1,25 +1,168 @@
-.app {
-  height: 100vh;
-  width: 100vw;
-  transition: background-color 1s ease-in;
+/* CSS Code*/
+/* Import from google fonts */
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;700;800;900&display=swap');
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Raleway', sans-serif;
+  background-color: #9CCEF4;
 }
 
-.app__header,
-.app__main {
+#root { 
+  height: 100%;
   width: 100%;
+}
+
+.header {
+  padding: 25px;
+  background-color: #759EDA;
+}
+.nav {
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  justify-content: flex-start;
+  gap: 30px;
+}
+.nav input {
+  background-color: #759EDA;
+  border: none;
+  width: 300px;
+  height: 63px;
+  font-size: 25px;
+}
+.nav input::placeholder {
+  color: white;
+  opacity: .6;
+}
+.nav input:focus {
+  outline: none;
+  border-bottom: 1px #5879C7 solid;
+  color: white;
+}
+.nav input:focus::placeholder {
+  opacity: 0;
+}
+.nav .button {
+  background-color: #5879C7;
+  color: #090B4F;
+  font-size: 20px;
   padding: 20px;
-  font-family: "Raleway", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  border: none;
+}
+
+section.w-details {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+section.w-details .content {
+  padding: 25px;
+  text-align: center;
 }
+section.w-details .content .w-image img {
+  width: 300px;
+}
+section.w-details .content .w-image p {
+  text-align: center;
+  font-size: 24px;
+  color: white;
+  font-weight: bold;
+  margin: 0;
+}
+section.w-details .content .temp {
+  font-size: 30px;
+  color: #090B4F;
+  font-weight: 500;
+}
+section.w-details .content .temp span {
+  font-size: 26px;
+  font-weight: normal;
+  margin-left: 10px;
+}
+
+section.w-details .content .details {
+  font-size: 18px;
+  color: #090B4F;
+  display: flex;
+  justify-content: space-between;
+}
+section.w-details .content .details span {
+  font-weight: 500;
+}
+
+section.w-hour {
+  padding: 25px;
+  display: flex;
+  justify-content: space-evenly;
+  text-align: center;
+}
+section.w-hour p {
+  font-size: 20px;
+}
+section.w-hour img {
+  width: 100px;
+}
+
+/* Responsive for Mobile */
+@media (max-width: 650px) {
+  #root {
+    height: auto;
+  }
+  .header .nav {
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+  .header .nav input {
+    width: 200px;
+  }
+  .header .nav input::placeholder {
+    text-align: center;
+    font-size: 20px;
+  }
+  .header .nav .button {
+    font-size: 20px;
+    padding: 10px;
+  }
+  section.w-hour {
+    flex-direction: column;
+  }
 
-/*  Search bar */
+  section.w-details .content .w-image img {
+    width: 200px;
+  }
+  section.w-details .content .w-image p {
+  font-size: 20px;
+  }
 
-/* Current weather */
+  section.w-details .content .temp {
+    display: flex;
+    flex-direction: column;
+    font-size: 20px;
+    margin-bottom: 40px;
+  }
+  section.w-details .content .temp span {
+    font-size: 20px;
+  }
+  section.w-details .content .details {
+    flex-direction: column;
+  }
+  section.w-details .content .details span:nth-child(2) {
+    margin-top: 20px;
+  }
 
-div {
-  border: 5px solid red;
+  section.w-hour {
+    padding-top: 0;
+  }
+  section.w-hour div {
+    display: flex;
+    justify-content: space-evenly;
+    padding: 10px;
+  }
+  section.w-hour img {
+    width: 75px;
+  }
+  section.w-hour div:not(:first-child) {
+    border-top: 1px solid #090B4F;
+  }
 }

src/App.js

@@ -1,32 +1,12 @@
 import React, { Component } from "react";
-import Search from "./components/Search";
-
-import SayHi, { SayHello } from "./components/WeatherItem";
 import fakeWeatherData from "./fakeWeatherData.json";
-
+import Home from './components/Home';
 import "./App.css";
-
-class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      name: "Karim"
-    };
+const App = () => {
+  return (
+    <div className="app">
+      <Home />
+    </div>
+  );
   }
-
-  handleInputChange = value => {
-    this.setState({ name: value });
-  };
-
-  render() {
-    return (
-      <div className="app">
-        <SayHi />
-        <SayHello color="black" name={this.state.name} />
-        <Search handleInput={this.handleInputChange} />
-      </div>
-    );
-  }
-}
-
 export default App;

src/components/ForcastHour.js

@@ -0,0 +1,17 @@
+import partlycloudy from '../img/weather-icons/partlycloudy.svg';
+import cloudy from '../img/weather-icons/cloudy.svg';
+import snow from '../img/weather-icons/snow.svg';
+import clear from '../img/weather-icons/clear.svg';
+
+const ForcastHour = () => {
+    return(
+        <>
+        <div>
+            <p className="time">03:00</p>
+            <img src={partlycloudy} alt="Partly Cloudy" />
+            <p className="temp">8&deg;C</p>
+        </div>
+        </>
+    )
+}
+export default ForcastHour ;

src/components/Home.js

@@ -0,0 +1,16 @@
+import React from "react";
+import Search from "./Search";
+import Main from "./Main";
+const Home = () => {
+    return(
+    <>
+        <header className="header">
+            <Search />
+        </header> 
+        <main role="main" class="main">
+            <Main /> 
+        </main>
+    </>
+    )
+}
+export default Home ;

src/components/Main.js

@@ -0,0 +1,13 @@
+import React from "react";
+import WeatherForcast from "./WeatherForcast";
+import WeatherInfo from "./WeatherInfo";
+
+const Main = () => {
+    return(
+    <>
+    <WeatherInfo />
+    <WeatherForcast /> 
+    </>  
+    )
+}
+export default Main ;

src/components/Search.js

@@ -1,32 +1,10 @@
 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>
-        {this.state.input}
-        <input
-          type="text"
-          id="input-name"
-          onChange={event => {
-            this.setState({ input: event.target.value });
-          }}
-        />
-        <button
-          onClick={event => {
-            this.props.handleInput(this.state.input);
-          }}
-        >
-          Say Hello
-        </button>
-      </div>
-    );
-  }
+const Search = () => {
+  return (
+      <nav className="nav">
+        <input type="text" name="" id="" placeholder="Type in a city here"/>
+        <button className="button">FIND WEATHER</button>
+      </nav>
+  );
 }
 export default Search;

src/components/WeatherForcast.js

@@ -0,0 +1,15 @@
+import ForcastHour from "./ForcastHour";
+const WeatherForcast = () => {
+    return(
+        <section className="w-hour">  
+          <ForcastHour/>
+          <ForcastHour/>
+          <ForcastHour/>
+          <ForcastHour/>
+          <ForcastHour/>
+          <ForcastHour/>
+          <ForcastHour/>
+      </section>
+    )
+}
+export default WeatherForcast ;

src/components/WeatherInfo.js

@@ -0,0 +1,20 @@
+import partlycloudy from '../img/weather-icons/partlycloudy.svg';
+import cloudy from '../img/weather-icons/cloudy.svg';
+import snow from '../img/weather-icons/snow.svg';
+import clear from '../img/weather-icons/clear.svg';
+
+const WeatherInfo = () => {
+    return(
+        <section class="w-details">
+            <div className="content">
+              <div className="w-image">
+                <img src={partlycloudy} alt="Partly Cloudy" />
+                <p className="desc">overcast clouds</p>
+              </div>
+              <p className="temp">Temperature <span>10&deg;C to 11&deg;C</span></p>
+              <p className="details"><span>Humidity</span> 78% <span>Pressure</span> 1008.48</p>
+            </div>
+          </section>
+    )
+}
+export default WeatherInfo ;