Connect to Weather API

src/App.js

@@ -13,13 +13,13 @@ function App() {
       <Header title={siteTitle} />
 
       <main className="c-site-main" tabIndex="0">
-        <div>
+        {/* <div>
           <img
             className="weather-img"
             src="https://cdn2.iconfinder.com/data/icons/weather-flat-14/64/weather02-512.png"
             alt="Current Weather"
           />
-        </div>
+        </div> */}
 
 
         {/* {FakeWeatherData.list.map((data) => (

src/App.scss

@@ -2,13 +2,60 @@
 @use "theme/global.scss";
 
 
-.c-site-main{
-    background-color: skyblue;
+.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;
-  // max-width: 100%;
   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,6 +1,8 @@
 import "./Header.scss";
+import WeatherIcon  from "../Picture/WeatherIcon";
 import React, { useState} from "react";
 
+
 const Header = ({ title }) => {
   const [weatherData, setWeatherData] = useState([]);
   const [city, setCity] = useState("");
@@ -18,23 +20,40 @@ const Header = ({ title }) => {
 
   return (
     <header className="c-site-header">
-      <h1 className="c-site-header__title">{title}</h1>
-
-      <input
-        className="city"
-        type="text"
-        value={city}
-        onChange={(event) => setCity(event.target.value)}
-      />
+      <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>
 
-      <button onClick={getNewWeather}>Search</button>
+      <WeatherIcon weatherId={weatherData?.weather?.[0]?.id} />
+      <div className="description">
+        <h3>{weatherData?.weather?.[0]?.description}</h3>
+      </div>
 
-      <div>
-        <h2>Temp: {weatherData?.main?.temp?.toFixed()}°C</h2>
+      <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;
+
+

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;