Jana

README.md

@@ -59,7 +59,7 @@ Add and commit this change to git, and push it up to your remote github repo:
 # git push
 ```
 
-Pay attention to any errors, and then check that your changes made it to github, by visiting github.com with your browser and inspecting your repo there.
+Pay attention to any errors, and then check that your changes made it to github, by visiting github.com with your browser and inspecting your repo there.a
 
 ## Instructions
 
@@ -189,7 +189,7 @@ Once you've got this all working, it's time to fetch some real weather data!
 ```
 
 ### 5. Getting the LIVE weather data <kbd>🔑x20</kbd>
-
+cc
 We'll be using data from this API: http://api.openweathermap.org/data/2.5/forecast?q=${this.state.searchInput}&cnt=8&units=metric&appid=${apiKey}
 
 The data will come in JSON format, and will look like this: https://samples.openweathermap.org/data/2.5/forecast?q=M%C3%BCnchen,DE&appid=b6907d289e10d714a6e88b30761fae22
@@ -198,7 +198,7 @@ The data will come in JSON format, and will look like this: https://samples.open
 
 **2)** Once logged in, go to the API keys tab and copy the default Key. Keep this somewhere safe as you will need it when you fetch data.
 
-![api key](src/img/instructions/api-key.png)
+![api key](src/img/instructions/api-key.png)ccc
 
 **3)** The format you'll need to follow to make API calls is:
 `http://api.openweathermap.org/data/2.5/forecast?q=${CITY_NAME}&cnt=8&units=metric&appid=${YOUR_API_KEY}`

public/index.html

@@ -12,6 +12,7 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
+
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
   <!--
       Notice the use of %PUBLIC_URL% in the tags above.

src/App.css

@@ -1,9 +1,89 @@
-.app {
-  height: 100vh;
-  width: 100vw;
-  transition: background-color 1s ease-in;
+@font-face {
+  font-family: 'Raleway';
+  src: url('/home/jana/Desktop/Weather-API/public/index.html') format('truetype');
 }
+body{
+  margin:0;
+  padding: 0;
+  font-family:'Raleway', sans-serif;
+  background-color: #8FC8F4;
+}
+header{
+  font-family:'Raleway', sans-serif;
+  background-color:#759EDA;
+  height: 140px;
+}
+input{
+  font-family:'Raleway', sans-serif;
+  border: none;
+  background-color:#759EDA;
+  margin-left: 20px;
+  height: 50px;
+  font-size:28px;
+  color: white;
+  outline: none;
+ }
+ ::placeholder{
+  color: white;
+  font-family:'Raleway', sans-serif;
+ }
+ input:focus{
+  border-bottom: 2px solid #5879C7;
+}
+button{
+  font-family:'Raleway', sans-serif;
+  background-color: #5879C7;
+  border: 0px;
+  border-radius: 3px;
+  height: 75px;
+  margin-left: 5%;
+  margin-top: 30px;
+  width:200px;
+  font-size: 20px;
+  color:#25355c;
+}
+.firstimage{
+  display:flex;
+  width: 250px;
+  height: 250px;
+  margin-top: 20px;
+  border-radius: 50%;
+  margin-left: 43%;
+}
+.overcast{
+  font-family:'Raleway', sans-serif;
+  color:white;
+  font-size: 28px;
+  margin-left: 44%;
+}
+.temp{
+  font-family:'Raleway', sans-serif;
+  color:#25355c;
+  font-size: 28px;
+  margin-left: 41%;
+  margin-top: 35px;
+}
+.humidity{
+  font-family:'Raleway', sans-serif;
+  color:#25355c;
+  font-size: 19px;
+  margin-left: 41%;
+  margin-top: 35px;
+
+}
+table{
+  color:#25355c;
+  font-size: 19px;
+  margin-left: 19%;
+  margin-right:40%;
+  width: 60%;
+  text-align: center;
+  margin-top: 3.9%;
 
+}
+.secondrow{
+  font-size: 10px;
+}
 .app__header,
 .app__main {
   width: 100%;
@@ -14,12 +94,46 @@
   font-family: "Raleway", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
 }
 
-/*  Search bar */
 
-/* Current weather */
+@media screen and (max-width: 600px) {
+  header {
+    height: 100px;
+  }
 
-div {
-  border: 5px solid red;
-}
+  input {
+    font-size: 20px;
+  }
+
+  button {
+    height: 60px;
+    font-size: 16px;
+  }
+
+  .firstimage {
+    width: 150px;
+    height: 150px;
+    margin-left: 29%;
+  }
+
+  .overcast{
+    font-size: 18px;
+    margin-left: 30%;
+  }
+  .temp {
+    font-size: 18px;
+    margin-left: 25%;
+  }
+  .humidity{
+    font-size: 16px;
+    margin-left: 20%;
+  }
+
+  table {
+    font-size: 20px;
+    margin-left: 8%;
+    margin-right: 5%;
+  }
+}

src/App.js

@@ -1,32 +1,88 @@
-import React, { Component } from "react";
-import Search from "./components/Search";
+import React, { useState } from "react";
+import "./App.css";
+import Head from './components/Header';
+import Section2 from './components/Section2';
+import Table from './components/Table';
+import FakeWeather from './fakeWeatherData.json';
 
-import SayHi, { SayHello } from "./components/WeatherItem";
-import fakeWeatherData from "./fakeWeatherData.json";
+function App() {
+  const [backgroundColor, setBackgroundColor] = useState('');
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+// class App extends Component {
+//   constructor(props) {
+//     super(props);
+//     this.state = {
+//       name: "Jana"
+//     };
+//   }
+// }
+  const searchForWeather = (searchInput) => {
+    setLoading(true);
+    setError(null);
 
-import "./App.css";
+    const apiKey = 'a623d23ca26596f50a965ac4c3025dff';
 
-class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      name: "Karim"
-    };
-  }
+    // Fetch data from the API when the button is clicked
+    fetch(`http://api.openweathermap.org/data/2.5/forecast?q=${searchInput}&cnt=8&units=metric&appid=${apiKey}`)
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error("Please Enter a valid city name");
+        }
+        return res.json();
+      })
+      .then((data) => {
+        setData(data);
+        setBackgroundColor(getBackgroundColor(data.list[0].weather[0].id));
 
-  handleInputChange = value => {
-    this.setState({ name: value });
+    setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
   };
-
-  render() {
-    return (
-      <div className="app">
-        <SayHi />
-        <SayHello color="black" name={this.state.name} />
-        <Search handleInput={this.handleInputChange} />
-      </div>
-    );
+  function getBackgroundColor(id) {
+    if (id < 300) {
+      return 'aqua'; 
+    } else if (id >= 300 && id < 500) {
+      return 'lightblue'; 
+    } else if (id >= 500 && id < 600) {
+      return 'blue'; 
+    } else if (id >= 600 && id < 700) {
+      return 'white'; 
+    } else if (id >= 700 && id < 800) {
+      return 'grey'; 
+    } else if (id === 800) {
+      return 'yellow'; 
+    } else if (id === 801) {
+      return 'black'; 
+    } else if (id > 801 && id <= 805) {
+      return 'red'; 
+    } else {
+      return 'lightblue'; 
+    }
   }
+
+  return (
+    <div className="app">
+    <div  style={{ backgroundColor: backgroundColor }}></div>
+      <main>
+        <Head searchForWeather={searchForWeather} />
+        {loading ? (
+          <p>Loading...</p>
+        ) : error ? (
+          <p>{error}</p>
+        ) : (
+          <>
+            {data && <Section2 data={data} color ={backgroundColor}/>}
+            {data && <Table data={data} color={backgroundColor} />}
+          </>
+        )}
+      </main>
+    </div>
+  );
 }
 
-export default App;
+export default App;

src/components/Header.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useState } from 'react';   
+
+const Head =(props)=>{
+    const [search, setSearch]=useState("")
+    const handleClick=()=>{
+        props.searchForWeather(search)
+    }
+    return(
+        <div className = "header">
+        <header>
+        <input  onChange={e=>setSearch(e.target.value)}   type="text" placeholder="Type in a city name"/>
+        <button onClick={handleClick}   className="btn">FIND WEATHER</button>
+        </header>
+        </div>
+    );
+}
+export default Head;

src/components/Search.css

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

src/components/Search.js

@@ -10,20 +10,23 @@ class Search extends React.Component {
   render() {
     return (
       <div>
+
         {this.state.input}
         <input
           type="text"
           id="input-name"
           onChange={event => {
             this.setState({ input: event.target.value });
+
+            // value={cityName}
+            // onChange={handleInputChange}
           }}
         />
         <button
           onClick={event => {
             this.props.handleInput(this.state.input);
           }}
-        >
-          Say Hello
+        >FIND WEATHER
         </button>
       </div>
     );