Marwa kassha forecast

package.json

@@ -5,7 +5,9 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1"
+    "react-scripts": "5.0.1",
+    "@babel/plugin-proposal-private-property-in-object": "^7.0.0"
+
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -1,25 +1,17 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
 .app {
   height: 100vh;
   width: 100vw;
+  margin: 0;
   transition: background-color 1s ease-in;
-}
-
-.app__header,
-.app__main {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 20px;
   font-family: "Raleway", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: rgb(97, 186, 222);
 }
 
-/*  Search bar */
-
-/* Current weather */
 
-div {
-  border: 5px solid red;
-}

src/App.js

@@ -1,32 +1,21 @@
-import React, { Component } from "react";
-import Search from "./components/Search";
-
-import SayHi, { SayHello } from "./components/WeatherItem";
-import fakeWeatherData from "./fakeWeatherData.json";
-
 import "./App.css";
+import Search from './components/Search.js'
+import Forecast from './components/Forecast';
+import CurrentWeather from './components/CurrentWeather';
+function App() {
 
-class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      name: "Karim"
-    };
-  }
 
-  handleInputChange = value => {
-    this.setState({ name: value });
-  };
+  //use useState() to target any change in the input text
+  return (
+    <div className="app">
+      <Search />
+      <main>
+      <CurrentWeather/>
+        <Forecast/>
+    </main>
+</div>
 
-  render() {
-    return (
-      <div className="app">
-        <SayHi />
-        <SayHello color="black" name={this.state.name} />
-        <Search handleInput={this.handleInputChange} />
-      </div>
-    );
-  }
+  )
 }
 
-export default App;
+export default App;

src/components/CurrentWeather.css

@@ -0,0 +1,63 @@
+.currentWeather {
+    text-align: center;
+    width: 100%;
+    height: 50%;
+
+  }
+
+
+  .weatherStatus {
+    font-weight: 800;
+    color: white;
+  }
+
+
+  .temperatureProperty {
+    font-weight: 600;
+    font-size: 24px;
+    margin-right: 15px;
+  }
+
+  .pressureProperty {
+    font-weight: 600;
+    margin: 0 15px;
+
+  }
+
+  .humidityProperty {
+    font-weight: 600;
+    margin-right: 15px;
+  }
+
+  @media only screen and (width<700px) {
+    .formSearching {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .citySearch {
+      width: 90%;
+      text-align: center;
+    }
+
+    .buttonSearch {
+      width: 150px;
+    }
+  }
+
+
+  @media only screen and (width<400px) {
+
+    .weatherDescription>p {
+
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      margin: 20px;
+    }
+
+    .weatherDescription>p>span {
+      margin: 0;
+    }
+  }

src/components/CurrentWeather.js

@@ -0,0 +1,17 @@
+import React from 'react-dom'
+import mostlycloudy from "../img/weather-icons/mostlycloudy.svg"
+function CurrentWeather(){
+    return(
+        <section className="currentWeather">
+    <img src={mostlycloudy} alt="weather status" width={150} height={150} />
+    <section className="weatherDescription">
+      <p className="weatherStatus">OverCast clouds</p>
+      <p><span className="temperatureProperty">temperature</span> 10° to 11°C</p>
+      <p><span className="humidityProperty">Humidity </span>78%<span className="pressureProperty"> Pressure </span>1008.4</p>
+    </section>
+
+  </section>
+    )
+}
+
+export default CurrentWeather;

src/components/Forecast.css

@@ -0,0 +1,59 @@
+.weather-forecast {
+    height: 30%;
+    width: 80%;
+    background-color: rgb(144, 205, 220);
+    border-radius: 8px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    max-width: 600px;
+    margin: 5% auto;
+    text-align: center;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .time {
+    font-weight: bold;
+    font-size: 18px;
+  }
+
+  .icon {
+    max-width: 50px;
+  }
+
+  .temperature {
+    margin-top: 10px;
+    font-size: 16px;
+  }
+
+  @media (max-width: 500px) {
+
+    .time {
+      font-size: 12px;
+    }
+
+    .icon {
+      max-width: 30px;
+    }
+
+    .temperature {
+      font-size: 12px;
+    }
+  }
+
+
+  @media (max-width: 300px) {
+
+    .time {
+      font-size: 10px;
+    }
+
+    .icon {
+      max-width: 30px;
+    }
+
+    .temperature {
+      font-size: 10px;
+    }
+  }