Connect to Weather API

.vscode/settings.json

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

src/App.js

@@ -1,19 +1,57 @@
 import "./App.scss";
+import React, { useState } from "react";
 import Header from "./components/Header/Header";
 import Footer from "./components/Footer/Footer";
-import Icon from './components/Icon/Icon';
+import CurrentWeather from "./components/CurrentWeather/CurrentWeather";
+import FutureWeather from "./components/FutureWeather/FutureWeather";
+
 
-//configs
 const siteTitle = process.env.REACT_APP_SITE_TITLE ?? "CYF Weather";
 
 function App() {
+  const [weatherData, setWeatherData] = useState([]);
+
+  function getNewWeather(city) {
+    fetch(
+      `https://api.openweathermap.org/data/2.5/forecast?q=${city}&units=metric&appid=3b86046cce0de3be7cfa8369f4540b37`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        setWeatherData(data);
+      });
+  }
+
   return (
     <div className="App">
-      <Header title={siteTitle} />
+      <Header
+        title={siteTitle}
+        getNewWeather={getNewWeather}
+        weatherData={weatherData}
+      />
+
       <main className="c-site-main" tabIndex="0">
-      <Icon name="clear"/>
-
+        <section className="current">
+          <CurrentWeather
+            weatherId={weatherData?.list?.[0]?.weather?.[0]?.id}
+            description={weatherData?.list?.[0]?.weather?.[0]?.description}
+            temp_min={Math.floor(weatherData?.list?.[0]?.main?.temp_min)}
+            temp_max={Math.ceil(weatherData?.list?.[0]?.main?.temp_max)}
+            humidity={weatherData?.list?.[0]?.main?.humidity}
+            pressure={weatherData?.list?.[0]?.main?.pressure}
+          />
+        </section>
+
+        <section className="future">
+          {weatherData?.list?.splice(0, 7)?.map((future) => (
+            <FutureWeather
+              time={future.dt_txt}
+              iconId={future.weather[0].id}
+              temp={future.main.temp.toFixed()}
+            />
+          ))}
+        </section>
       </main>
+
       <Footer />
     </div>
   );

src/App.scss

@@ -1,2 +1,89 @@
 @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;
+}
+
+// ----------current weather----------
+.current{
+  text-align: center;
+}
+
+.current-icon{
+  margin: auto;
+  width: 300px;
+  height: 300px;
+  object-fit: cover;
+}
+
+.description{
+  color: white;
+}
+
+.temp {
+  margin: 20px;
+}
+
+.current-container{
+  display: flex;
+  justify-content: center;
+}
+
+.humid-press{
+  padding: 30px;
+}
+
+
+// -----------future weather------
+.future{
+  margin-top: 50px;
+  text-align: center;
+}
+
+.container {
+   display: inline-grid;
+   grid-template-columns: repeat(100px, 1fr);
+   grid-gap: 10px;
+   text-align: center;
+}
+
+.items{
+  // border: 1px solid #ccc;
+  text-align: center;
+  padding: 10px;
+}
+
+.future-icon {
+  margin: auto;
+  width: 150px;
+  height: 150px;
+  object-fit: cover;
+}

src/components/CurrentWeather/CurrentWeather.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import WeatherIcon from '../Picture/WeatherIcon';
+
+
+function CurrentWeather({ weatherId, description, temp_min, temp_max, humidity, pressure }) {
+  return (
+    <>
+      <div className="current-icon">
+        <WeatherIcon weatherId={weatherId} />
+      </div>
+
+      <h2 className="description">{description}</h2>
+      <h3 className="temp">
+        Temperature : {temp_min}° to {temp_max}°C
+      </h3>
+
+      <div className="current-container">
+        <h4 className="humid-press">Humidity : {humidity}%</h4>
+        <h4 className="humid-press">Pressure : {pressure}</h4>
+      </div>
+    </>
+  );
+}
+
+export default CurrentWeather

src/components/FutureWeather/FutureWeather.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import WeatherIcon from "../Picture/WeatherIcon";
+
+
+ function FutureWeather({ time, iconId, temp }) {
+  const formattedTime = time.split(" ")[1].slice(0,5)
+
+  return (
+    <div className="container">
+      <div className="items">
+        <p>{formattedTime}</p>
+        <div className="future-icon">
+          <WeatherIcon weatherId={iconId} />
+        </div>
+        <p>{temp}°C</p>
+      </div>
+    </div>
+  );
+}
+export default FutureWeather;
+

src/components/Header/Header.jsx

@@ -1,11 +1,27 @@
-import React from "react";
-import './Header.scss'
+import "./Header.scss";
+import React, { useState } from "react";
 
-const Header = ({title}) =>
+const Header = ({ title, getNewWeather }) => {
+  const [city, setCity] = useState("");
+
+  return (
     <header className="c-site-header">
-        <h1 className="c-site-header__title o-type__invisible">{title}</h1>
-        {/* look up component */}
+      <div className="heading">
+        <h1 className="c-site-header__title">{title}</h1>
+        <input
+          className="city"
+          type="text"
+          placeholder="Type in a city name"
+          value={city}
+          onChange={(event) => setCity(event.target.value)}
+        />
+        <button className="search-btn" onClick={() => getNewWeather(city)}>
+          FIND WEATHER
+        </button>
+      </div>
+
     </header>
+  );
+};
 
-
-export default Header;
+export default Header;

src/components/Icon/Icon.jsx

@@ -1,37 +1,37 @@
-import React from 'react'
-import clear from '../../img/weather-icons/clear.svg'
-import cloudy from '../../img/weather-icons/cloudy.svg'
-import drizzle from '../../img/weather-icons/drizzle.svg'
-import fog from '../../img/weather-icons/fog.svg'
-import mostlycloudy from '../../img/weather-icons/mostlycloudy.svg'
-import partlycloudy from '../../img/weather-icons/partlycloudy.svg'
-import rain from '../../img/weather-icons/rain.svg'
-import snow from '../../img/weather-icons/snow.svg'
-import storm from '../../img/weather-icons/storm.svg'
-import unknown from '../../img/weather-icons/unknown.svg'
+import React from "react";
+import clear from "../../img/weather-icons/clear.svg";
+import cloudy from "../../img/weather-icons/cloudy.svg";
+import drizzle from "../../img/weather-icons/drizzle.svg";
+import fog from "../../img/weather-icons/fog.svg";
+import mostlycloudy from "../../img/weather-icons/mostlycloudy.svg";
+import partlycloudy from "../../img/weather-icons/partlycloudy.svg";
+import rain from "../../img/weather-icons/rain.svg";
+import snow from "../../img/weather-icons/snow.svg";
+import storm from "../../img/weather-icons/storm.svg";
+import unknown from "../../img/weather-icons/unknown.svg";
 
 function Icon({ name }) {
-  if (name === 'clear') {
-    return <img src={clear} alt="clear" />
-  } else if (name === 'cloudy') {
-    return <img src={cloudy} alt="cloudy" />
-  } else if (name === 'drizzle') {
-    return <img src={drizzle} alt="drizzle" />
-  } else if (name === 'fog') {
-    return <img src={fog} alt="fog" />
-  } else if (name === 'mostlycloudy') {
-    return <img src={mostlycloudy} alt="mostlycloudy" />
-  } else if (name === 'partlycloudy') {
-    return <img src={partlycloudy} alt="partlycloudy" />
-  } else if (name === 'rain') {
-    return <img src={rain} alt="rain" />
-  } else if (name === 'snow') {
-    return <img src={snow} alt="snow" />
-  } else if (name === 'storm') {
-    return <img src={storm} alt="storm" />
+  if (name === "clear") {
+    return <img src={clear} alt="clear" />;
+  } else if (name === "cloudy") {
+    return <img src={cloudy} alt="cloudy" />;
+  } else if (name === "drizzle") {
+    return <img src={drizzle} alt="drizzle" />;
+  } else if (name === "fog") {
+    return <img src={fog} alt="fog" />;
+  } else if (name === "mostlycloudy") {
+    return <img src={mostlycloudy} alt="mostlycloudy" />;
+  } else if (name === "partlycloudy") {
+    return <img src={partlycloudy} alt="partlycloudy" />;
+  } else if (name === "rain") {
+    return <img src={rain} alt="rain" />;
+  } else if (name === "snow") {
+    return <img src={snow} alt="snow" />;
+  } else if (name === "storm") {
+    return <img src={storm} alt="storm" />;
   } else {
-    return <img src={unknown} alt="unknown" />
+    return <img src={unknown} alt="unknown" />;
   }
 }
 
-export default Icon
+export default Icon;

src/components/Picture/WeatherIcon.jsx

@@ -0,0 +1,55 @@
+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";
+import unknown from "../../img/weather-icons/unknown.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" },
+  unknown: { src: unknown, alt: "unknown" },
+};
+
+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;
+  } else if (weatherId < 805 && weatherId > 801) {
+    return images.mostlyCloudy;
+  }
+  return images.unknown;
+}
+
+const WeatherIcon = ({ weatherId }) => {
+  const image = selectImage(weatherId);
+
+  return (
+    <div>
+      <img src={image.src} alt={image.alt} />
+    </div>
+  );
+};
+
+export default WeatherIcon;