SaharNaderi-London9

.github/public/src/App.js

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import "./App.scss";
+import Header from "./components/Header/Header";
+import Footer from "./components/Footer/Footer";
+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=ffc5f974cd7c0ef5538059f343d6275f
+`
+    )
+      .then((response) => response.json())
+      .then((data) => {
+        setData(data);
+      });
+  }
+
+  return (
+
+    <div className="App">
+      <Header title={siteTitle} getNewLocation={getNewLocation} data={data} />
+
+      <main className="c-site-main" tabIndex="0">
+        <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>
+  );
+}
+
+export default App;

.github/public/src/App.scss

@@ -0,0 +1,102 @@
+@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;
+}
+
+
+// // -----------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: 0px 2em 0px 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;
+}

.github/public/src/components/Header/Header.jsx

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+import "./Header.scss";
+
+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;

src/components/Header/Header.scss → .github/public/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);
 }
-
-

.github/public/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;

.github/public/src/components/Icon/Icon.jsx

@@ -0,0 +1,58 @@
+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'
+
+
+
+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

.github/public/src/components/TodayForecast/TodayForecast.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Icon from "../Icon/Icon";
+
+export function TodayForecast({
+  weatherId,
+  description,
+  temp_min,
+  temp_max,
+  humidity,
+  pressure,
+}) {
+    console.log(weatherId);
+    console.log(description);
+  return (
+    <div>
+      <Icon weatherId={weatherId} />
+      <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>
+    </div>
+  );
+}

src/theme/colors.scss → .github/public/src/theme/colors.scss

@@ -13,5 +13,8 @@
     --theme-color-ink: rgba(255, 255, 255, 1);
     --theme-color-highlight: rgba(0, 0, 0, 1);
     --theme-color-shade: rgba(0, 0, 0, 1);
+
+
+
   }
 }

.github/public/src/theme/images.scss

@@ -0,0 +1,12 @@
+svg{
+    height: auto;
+    width: auto;
+    min-width: 1em;
+}
+
+img {
+    width: auto;
+    height: auto;
+    max-width: auto;
+    object-fit: fill;
+    }