Connect to Weather API

.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,61 @@
 @use "theme/utilities.scss";
 @use "theme/global.scss";
+
+
+.App{
+    background-color: #8ecae6;
+}
+
+.c-site-header{
+  padding: 20px;
+}
+
+.heading{
+  background-color: #219ebc;
+  padding: 10px;
+}
+
+.c-site-header__title{
+  color: #023047;
+  padding: 20px;
+}
+
+.city{
+  margin: 15px;
+  padding: 15px;
+}
+
+.search-btn{
+  background-color: #023047;
+  color: white;
+  margin-left: 15px;
+  padding: 15px;
+}
+
+.weather-img{
+  margin: auto;
+  width: 200px;
+  height: 200px;
+  object-fit: cover;
+}
+
+.description{
+  display: flex;
+  justify-content: center;
+  color: white;
+}
+
+.temp {
+  display: flex;
+  justify-content: center;
+  margin: 20px;
+}
+
+.box{
+  display: flex;
+  justify-content: center;
+}
+
+.sub-box{
+  padding: 30px;
+}

src/components/Header/Header.jsx

@@ -1,10 +1,59 @@
-import React from "react";
-import './Header.scss'
+import "./Header.scss";
+import WeatherIcon  from "../Picture/WeatherIcon";
+import React, { useState} from "react";
 
-const Header = ({title}) =>
+
+const Header = ({ title }) => {
+  const [weatherData, setWeatherData] = useState([]);
+  const [city, setCity] = useState("");
+
+
+  function getNewWeather (){
+    fetch(
+      `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=3b86046cce0de3be7cfa8369f4540b37`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        setWeatherData(data);
+      })
+  }
+
+  return (
     <header className="c-site-header">
+      <div className="heading">
         <h1 className="c-site-header__title">{title}</h1>
+        <input
+          className="city"
+          type="text"
+          placeholder="City"
+          value={city}
+          onChange={(event) => setCity(event.target.value)}
+        />
+        <button className="search-btn" onClick={getNewWeather}>FIND WEATHER</button>
+      </div>
+
+      <WeatherIcon weatherId={weatherData?.weather?.[0]?.id} />
+      <div className="description">
+        <h3>{weatherData?.weather?.[0]?.description}</h3>
+      </div>
+
+      <div className="temp">
+        <h2>Temperature : {weatherData?.main?.temp?.toFixed()}°C</h2>
+      </div>
+
+      <div className="box">
+        <div className="sub-box">
+          <h4>Humidity : {weatherData?.main?.humidity}% </h4>
+        </div>
+
+        <div className="sub-box">
+          <h4>Pressure : {weatherData?.main?.pressure}</h4>
+        </div>
+      </div>
     </header>
+  );
+};
+
+export default Header;
 
 
-export default Header;

src/components/Picture/WeatherIcon.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import storm from "../../img/weather-icons/storm.svg";
+import drizzle from "../../img/weather-icons/drizzle.svg";
+import rain from "../../img/weather-icons/rain.svg";
+import snow from "../../img/weather-icons/snow.svg";
+import fog from "../../img/weather-icons/fog.svg";
+import clear from "../../img/weather-icons/clear.svg";
+import partlyCloudy from "../../img/weather-icons/partlycloudy.svg";
+import mostlyCloudy from "../../img/weather-icons/mostlycloudy.svg";
+
+const images = {
+  storm: { src: storm, alt: "storm" },
+  drizzle: { src: drizzle, alt: "drizzle" },
+  rain: { src: rain, alt: "rain" },
+  snow: { src: snow, alt: "snow" },
+  fog: { src: fog, alt: "fog" },
+  clear: { src: clear, alt: "clear" },
+  partlyCloudy: { src: partlyCloudy, alt: "partly cloudy" },
+  mostlyCloudy: { src: mostlyCloudy, alt: "mostly cloudy" },
+};
+
+
+function selectImage(weatherId){
+  if (weatherId < 300) {
+    return images.storm;
+  } else if (weatherId < 499) {
+    return images.drizzle;
+  } else if (weatherId < 599) {
+    return images.rain;
+  } else if (weatherId < 699) {
+    return images.snow;
+  } else if (weatherId < 799) {
+    return images.fog;
+  } else if (weatherId === 800) {
+    return images.clear;
+  } else if (weatherId === 801) {
+    return images.partlyCloudy;
+  }
+  return images.mostlyCloudy;
+}
+
+const WeatherIcon = ({weatherId}) =>{
+
+  const image = selectImage(weatherId)
+
+  return (
+    <div className="weather-img">
+      <img src={image.src} alt={image.alt} />
+    </div>
+  );
+}
+
+export default WeatherIcon;