Create Main.js

.vscode/settings.json

@@ -0,0 +1 @@
+{}

src/App.js

@@ -1,16 +1,35 @@
 import "./App.scss";
 import Header from "./components/Header/Header";
 import Footer from "./components/Footer/Footer";
+// import FakeWeatherData from "./data/FakeWeather.json";
+
 
-//configs
 const siteTitle = process.env.REACT_APP_SITE_TITLE ?? "CYF Weather";
 
 function App() {
+
   return (
     <div className="App">
       <Header title={siteTitle} />
+
       <main className="c-site-main" tabIndex="0">
+        <div>
+          <img
+            className="weather-img"
+            src="https://cdn2.iconfinder.com/data/icons/weather-flat-14/64/weather02-512.png"
+            alt="Current Weather"
+          />
+        </div>
+
+
+        {/* {FakeWeatherData.list.map((data) => (
+          <div key={data.dt}>Temp : {data && data.main.temp}</div>
+        ))} */}
+
+        {/* <div>{location}</div> */}
+        {/* <div>{temp && temp.list[0].main.temp}</div> */}
       </main>
+
       <Footer />
     </div>
   );

src/App.scss

@@ -1,2 +1,14 @@
 @use "theme/utilities.scss";
 @use "theme/global.scss";
+
+
+.c-site-main{
+    background-color: skyblue;
+}
+
+.weather-img{
+  width: 200px;
+  height: 200px;
+  // max-width: 100%;
+  object-fit: cover;
+}

src/components/Header/Header.jsx

@@ -1,10 +1,45 @@
-import React from "react";
-import './Header.scss'
+import "./Header.scss";
+import React, { useState, useEffect } from "react";
 
-const Header = ({title}) =>
+const Header = ({ title }) => {
+  const [temp, setTemp] = useState([]);
+  const [city, setCity] = useState("");
+
+  function changeCity(){
+     setTemp(temp);
+  }
+
+  useEffect(() => {
+    fetch(
+      `https://api.openweathermap.org/data/2.5/weather?q=liverpool&units=metric&appid=3b86046cce0de3be7cfa8369f4540b37`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        // console.log(data.main.temp.toFixed());
+        setTemp(data);
+      })
+      .catch((e) => console.log(e.message));
+  }, []);
+
+  return (
     <header className="c-site-header">
-        <h1 className="c-site-header__title">{title}</h1>
-    </header>
+      <h1 className="c-site-header__title">{title}</h1>
 
+      <input
+        className="city"
+        type="text"
+        value={city}
+        onChange={(event) => setCity(event.target.value)}
+      />
+
+      <button onClick={changeCity}>Search</button>
+      <div>
+        <h2>Temp:{temp.main.temp.toFixed()}°C</h2>
+      </div>
+
+      {/* {data.main.temp ? <h1>Temp:{data.main.temp}°C </h1> : null} */}
+    </header>
+  );
+};
 
-export default Header;
+export default Header;