Final edition

src/App.js

@@ -1,18 +1,52 @@
+import React, { useState } from "react";
 import "./App.scss";
 import Header from "./components/Header/Header";
 import Footer from "./components/Footer/Footer";
-import Icon from './components/Icon/Icon';
+import { TodayForecast } from "./components/TodayForecast/TodayForecast";
+import HourlyForecast from "./components/HourlyForecast/HourlyForecast";
+// import Icon from "./components/Icon/Icon";
 
 //configs
 const siteTitle = process.env.REACT_APP_SITE_TITLE ?? "CYF Weather";
 
 function App() {
+  const [data, setData] = useState([]);
+
+  function getNewLocation(city) {
+    fetch(
+      `https://api.openweathermap.org/data/2.5/forecast?q=${city}&units=metric&appid=7e5286e19236105eab5bba5240bf165e`
+    )
+      .then((response) => response.json())
+      .then((data) => {
+        setData(data);
+      })
+      .catch((err) => console.log(err));
+  }
+
   return (
     <div className="App">
-      <Header title={siteTitle} />
+      <Header title={siteTitle} getNewLocation={getNewLocation} data={data} />
+
       <main className="c-site-main" tabIndex="0">
-      <Icon name="clear"/>
-
+        <section className="todayForecast">
+          <TodayForecast
+            weatherId={data?.list?.[0]?.weather?.[0]?.id}
+            description={data?.list?.[0]?.weather?.[0]?.description}
+            temp_min={Math.floor(data?.list?.[0]?.main?.temp_min)}
+            temp_max={Math.ceil(data?.list?.[0]?.main?.temp_max)}
+            humidity={data?.list?.[0]?.main?.humidity}
+            pressure={data?.list?.[0]?.main?.pressure}
+          />
+        </section>
+        <section className="hourlyForecast">
+          {data?.list?.splice(0, 7)?.map((future) => (
+            <HourlyForecast
+              time={future.dt_txt}
+              iconId={future.weather[0].id}
+              temp={future.main.temp.toFixed()}
+            />
+          ))}
+        </section>
       </main>
       <Footer />
     </div>

src/App.scss

@@ -1,2 +1,109 @@
 @use "theme/utilities.scss";
 @use "theme/global.scss";
+// @use "theme/fonts.scss";
+
+.App {
+  background-color: #8ecae6;
+}
+
+.c-site-header {
+  padding: 20px;
+}
+
+.header {
+  background-color: #219ebc;
+  padding: 10px;
+}
+
+.Location {
+  background-color: #37b0cf;
+  margin: 10px;
+  padding: 10px;
+  border: none;
+  border-bottom: 2px solid rgb(8, 8, 78);
+}
+
+.button {
+  background-color: #0d6b9a;
+  color: white;
+  margin-left: 15px;
+  padding: 15px;
+  border: none;
+  border-radius: 5px;
+}
+
+// ----------TodayForecast section----------
+.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;
+}
+
+.current-container {
+  display: flex;
+  justify-content: center;
+}
+
+.humid-press {
+  padding: 30px;
+}
+
+.getStart {
+  font-size: 20px;
+  margin: auto;
+  width: 250px;
+  height: 200px;
+  object-fit: cover;
+}
+
+// // -----------HourlyForecast------
+
+// .container{
+//   background-color: #023047;
+//   display: flex;
+//   flex-wrap: nowrap;
+//   width: 100%;
+//   padding: 0px 2em 0px 2em;
+//   justify-content: center;
+// }
+
+.hourlyForecast {
+  display: flex;
+  // flex-direction: column;
+  background-color: #023047;
+  // text-align: center;
+  line-height: 50px;
+  padding: 0 2em;
+  justify-content: center;
+  flex-wrap: nowrap;
+}
+
+.items {
+  display: flex;
+  height: auto;
+  // column-gap: 20px;
+  // background-color: #023047;
+  justify-content: center;
+  align-items: center;
+  width: auto;
+  // border: 1px solid #fb8500;
+}
+
+.time,
+.temperature {
+  display: flex;
+  color: white;
+}

src/components/Header/Header.jsx

@@ -1,11 +1,25 @@
-import React from "react";
-import './Header.scss'
+import React, { useState } from "react";
+import "./Header.scss";
 
-const Header = ({title}) =>
-    <header className="c-site-header">
-        <h1 className="c-site-header__title o-type__invisible">{title}</h1>
-        {/* look up component */}
-    </header>
+const Header = ({getNewLocation}) => {
+  const [city, setCity] = useState("");
+// console.log({ city });
 
+  return (
+    <header className="header">
+      <input
+        className="Location"
+
+        placeholder="Type in a city name"
+        value={city}
+        onChange={(e) => setCity(e.target.value)}
+      />
+      <button className="button" onClick={() => getNewLocation(city)}>
+        Find Weather
+      </button>
+    </header>
+  );
+
+}; 
 
-export default Header;
+export default Header;

src/components/Header/Header.scss

@@ -1,8 +1,7 @@
 @use "../../theme/utilities.scss";
+@use "../../theme/global.scss";
 
 
 .c-site-header {
     background-color: var(--theme-color--block);
 }
-
-

src/components/HourlyForecast/HourlyForecast.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import Icon from "../Icon/Icon";
+
+function HourlyForecast({ time, iconId, temp }) {
+  const formattedTime = time.split(" ")[1].slice(0, 5);
+
+  return (
+    <div className="container">
+      <div className="items time">{formattedTime}</div>
+      <div className="items">
+        <Icon weatherId={iconId} />
+      </div>
+      <div className="items temperature">{temp}°C</div>
+    </div>
+  );
+}
+export default HourlyForecast;

src/components/Icon/AllIcons.jsx

@@ -0,0 +1,38 @@
+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 AllIcons({ name }) {
+  if (name === 'clear') {
+    return <img className="weather-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" />
+  }
+}
+
+export default AllIcons;

src/components/Icon/Icon.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import clear from '../../img/weather-icons/clear.svg'
-import cloudy from '../../img/weather-icons/cloudy.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'
@@ -10,28 +10,71 @@ 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" />
-  } else {
-    return <img src={unknown} alt="unknown" />
+// 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" />
+//   } else {
+//     return <img src={unknown} alt="unknown" />
+//   }
+// }
+
+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 Icon = ({ weatherId }) => {
+  const image = selectImage(weatherId);
+
+  return (
+    <div className="weather-img">
+      <img src={image.src} alt={image.alt} />
+    </div>
+  );
+};
+
 export default Icon