From f0709d851f54c77d8b941378872579e929665a22 Mon Sep 17 00:00:00 2001 From: Zaw Khing Date: Sat, 4 Feb 2023 12:16:20 +0000 Subject: [PATCH 01/10] Create Main.js --- src/Main.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 src/Main.js diff --git a/src/Main.js b/src/Main.js new file mode 100644 index 0000000..5865d18 --- /dev/null +++ b/src/Main.js @@ -0,0 +1,14 @@ +import React from 'react' + +function Main() { + return ( +
+ {/* fetch the data + images + current Weather + future Weather */} +
+ ) +} + +export default Main \ No newline at end of file From 26040ad30df4de4e05f66b8e5767817fba08f3aa Mon Sep 17 00:00:00 2001 From: Sally McGrath Date: Sat, 4 Feb 2023 13:58:20 +0000 Subject: [PATCH 02/10] moving Zaw's comments to app.js --- src/App.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/App.js b/src/App.js index 89fc8bc..d553af5 100644 --- a/src/App.js +++ b/src/App.js @@ -10,6 +10,10 @@ function App() {
+ {/* fetch the data + images + current Weather + future Weather */}
From 07185491511e4db3507f74a3d37aa0b79357d381 Mon Sep 17 00:00:00 2001 From: Sally McGrath Date: Sat, 4 Feb 2023 13:58:49 +0000 Subject: [PATCH 03/10] deleting main component as we think we don't need this complexity --- src/Main.js | 14 -------------- 1 file changed, 14 deletions(-) delete mode 100644 src/Main.js diff --git a/src/Main.js b/src/Main.js deleted file mode 100644 index 5865d18..0000000 --- a/src/Main.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' - -function Main() { - return ( -
- {/* fetch the data - images - current Weather - future Weather */} -
- ) -} - -export default Main \ No newline at end of file From 08fa292e0c39d6b5be9eb62f2fa110b792d7b39a Mon Sep 17 00:00:00 2001 From: Zaw Khing Date: Sat, 4 Feb 2023 15:30:24 +0000 Subject: [PATCH 04/10] Adding weather image --- src/App.js | 9 +++++++++ src/App.scss | 12 ++++++++++++ src/Main.js | 14 -------------- 3 files changed, 21 insertions(+), 14 deletions(-) delete mode 100644 src/Main.js diff --git a/src/App.js b/src/App.js index 89fc8bc..95e7bdb 100644 --- a/src/App.js +++ b/src/App.js @@ -10,6 +10,15 @@ function App() {
+ Current Weather + {/* fetch the data + images + current Weather + future Weather */}
diff --git a/src/App.scss b/src/App.scss index ede0d3f..b43f47b 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1,2 +1,14 @@ @use "theme/utilities.scss"; @use "theme/global.scss"; + + +.c-site-main{ + background-color: skyblue; +} + +.weather-img{ + width: 100%; + height: 100%; + max-width: 100%; + object-fit: cover; +} \ No newline at end of file diff --git a/src/Main.js b/src/Main.js deleted file mode 100644 index 5865d18..0000000 --- a/src/Main.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' - -function Main() { - return ( -
- {/* fetch the data - images - current Weather - future Weather */} -
- ) -} - -export default Main \ No newline at end of file From dac08f8d171379df3735a7dd8aafae3b91c02e08 Mon Sep 17 00:00:00 2001 From: Zaw Khing Date: Fri, 17 Feb 2023 11:20:25 +0000 Subject: [PATCH 05/10] Fetching API --- .vscode/settings.json | 1 + src/App.js | 31 +- src/App.scss | 6 +- src/components/Header/Header.jsx | 44 +- src/data/FakeWeather.json | 1259 ++++++++++++++++++++++++++++++ 5 files changed, 1322 insertions(+), 19 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 src/data/FakeWeather.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 95e7bdb..0e04115 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,36 @@ 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 (
+
- Current Weather - {/* fetch the data - images - current Weather - future Weather */} +
+ Current Weather +
+ + + + {/* {FakeWeatherData.list.map((data) => ( +
Temp : {data && data.main.temp}
+ ))} */} + + {/*
{location}
*/} + {/*
{temp && temp.list[0].main.temp}
*/}
+
); diff --git a/src/App.scss b/src/App.scss index b43f47b..4d6dadb 100644 --- a/src/App.scss +++ b/src/App.scss @@ -7,8 +7,8 @@ } .weather-img{ - width: 100%; - height: 100%; - max-width: 100%; + width: 200px; + height: 200px; + // max-width: 100%; object-fit: cover; } \ No newline at end of file diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 52eff98..54420c7 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -1,10 +1,42 @@ -import React from "react"; -import './Header.scss' +import "./Header.scss"; +import React, { useState, useEffect } from "react"; -const Header = ({title}) => +const Header = ({ title }) => { + const [data, setData] = useState([]); + // const [city, setCity] = useState(""); + + useEffect(() => { + fetch( + `https://api.openweathermap.org/data/2.5/weather?q=liverpool&units=metric&appid=3b86046cce0de3be7cfa8369f4540b37` + ) + .then((res) => res.json()) + .then((data) => { + // console.log(data.main.temp.toFixed()); + setData(data); + }) + .catch((e) => console.log(e.message)); + }, []); + + return (
-

{title}

-
+

{title}

+ + setCity(event.target.value)} + /> + + +
+

Temp:{data.main.temp.toFixed()}°C

+
+ + {/* {data.main.temp ?

Temp:{data.main.temp}°C

: null} */} + + ); +}; -export default Header; \ No newline at end of file +export default Header; diff --git a/src/data/FakeWeather.json b/src/data/FakeWeather.json new file mode 100644 index 0000000..e2cb00b --- /dev/null +++ b/src/data/FakeWeather.json @@ -0,0 +1,1259 @@ +{ + "cod": "200", + "message": 0.0032, + "cnt": 36, + "list": [ + { + "dt": 1487246400, + "main": { + "temp": 286.67, + "temp_min": 281.556, + "temp_max": 286.67, + "pressure": 972.73, + "sea_level": 1046.46, + "grnd_level": 972.73, + "humidity": 75, + "temp_kf": 5.11 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "01d" + } + ], + "clouds": { + "all": 0 + }, + "wind": { + "speed": 1.81, + "deg": 247.501 + }, + "sys": { + "pod": "d" + }, + "dt_txt": "2017-02-16 12:00:00" + }, + { + "dt": 1487257200, + "main": { + "temp": 285.66, + "temp_min": 281.821, + "temp_max": 285.66, + "pressure": 970.91, + "sea_level": 1044.32, + "grnd_level": 970.91, + "humidity": 70, + "temp_kf": 3.84 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "01d" + } + ], + "clouds": { + "all": 0 + }, + "wind": { + "speed": 1.59, + "deg": 290.501 + }, + "sys": { + "pod": "d" + }, + "dt_txt": "2017-02-16 15:00:00" + }, + { + "dt": 1487268000, + "main": { + "temp": 277.05, + "temp_min": 274.498, + "temp_max": 277.05, + "pressure": 970.44, + "sea_level": 1044.7, + "grnd_level": 970.44, + "humidity": 90, + "temp_kf": 2.56 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "01n" + } + ], + "clouds": { + "all": 0 + }, + "wind": { + "speed": 1.41, + "deg": 263.5 + }, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-16 18:00:00" + }, + { + "dt": 1487278800, + "main": { + "temp": 272.78, + "temp_min": 271.503, + "temp_max": 272.78, + "pressure": 969.32, + "sea_level": 1044.14, + "grnd_level": 969.32, + "humidity": 80, + "temp_kf": 1.28 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "01n" + } + ], + "clouds": { + "all": 0 + }, + "wind": { + "speed": 2.24, + "deg": 205.502 + }, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-16 21:00:00" + }, + { + "dt": 1487289600, + "main": { + "temp": 273.341, + "temp_min": 273.341, + "temp_max": 273.341, + "pressure": 968.14, + "sea_level": 1042.96, + "grnd_level": 968.14, + "humidity": 85, + "temp_kf": 0 + }, + "weather": [ + { + "id": 803, + "main": "Clouds", + "description": "broken clouds", + "icon": "04n" + } + ], + "clouds": { + "all": 76 + }, + "wind": { + "speed": 3.59, + "deg": 224.003 + }, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-17 00:00:00" + }, + { + "dt": 1487300400, + "main": { + "temp": 275.568, + "temp_min": 275.568, + "temp_max": 275.568, + "pressure": 966.6, + "sea_level": 1041.39, + "grnd_level": 966.6, + "humidity": 89, + "temp_kf": 0 + }, + "weather": [ + { + "id": 500, + "main": "Rain", + "description": "light rain", + "icon": "10n" + } + ], + "clouds": { + "all": 76 + }, + "wind": { + "speed": 3.77, + "deg": 237.002 + }, + "rain": { + "3h": 0.32 + }, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-17 03:00:00" + }, + { + "dt": 1487311200, + "main": { + "temp": 276.478, + "temp_min": 276.478, + "temp_max": 276.478, + "pressure": 966.45, + "sea_level": 1041.21, + "grnd_level": 966.45, + "humidity": 97, + "temp_kf": 0 + }, + "weather": [ + { + "id": 501, + "main": "Rain", + "description": "moderate rain", + "icon": "10n" + } + ], + "clouds": { + "all": 92 + }, + "wind": { + "speed": 3.81, + "deg": 268.005 + }, + "rain": { + "3h": 4.9 + }, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-17 06:00:00" + }, + { + "dt": 1487322000, + "main": { + "temp": 276.67, + "temp_min": 276.67, + "temp_max": 276.67, + "pressure": 967.41, + "sea_level": 1041.95, + "grnd_level": 967.41, + "humidity": 100, + "temp_kf": 0 + }, + "weather": [ + { + "id": 500, + "main": "Rain", + "description": "light rain", + "icon": "10d" + } + ], + "clouds": { + "all": 64 + }, + "wind": { + "speed": 2.6, + "deg": 266.504 + }, + "rain": { + "3h": 1.37 + }, + "sys": { + "pod": "d" + }, + "dt_txt": "2017-02-17 09:00:00" + }, + { + "dt": 1487332800, + "main": { + "temp": 278.253, + "temp_min": 278.253, + "temp_max": 278.253, + "pressure": 966.98, + "sea_level": 1040.89, + "grnd_level": 966.98, + "humidity": 95, + "temp_kf": 0 + }, + "weather": [ + { + "id": 500, + "main": "Rain", + "description": "light rain", + "icon": "10d" + } + ], + "clouds": { + "all": 92 + }, + "wind": { + "speed": 3.17, + "deg": 261.501 + }, + "rain": { + "3h": 0.12 + }, + "sys": { + "pod": "d" + }, + "dt_txt": "2017-02-17 12:00:00" + }, + { + "dt": 1487343600, + "main": { + "temp": 276.455, + "temp_min": 276.455, + "temp_max": 276.455, + "pressure": 966.38, + "sea_level": 1040.17, + "grnd_level": 966.38, + "humidity": 99, + "temp_kf": 0 + }, + "weather": [ + { + "id": 500, + "main": "Rain", + "description": "light rain", + "icon": "10d" + } + ], + "clouds": { + "all": 92 + }, + "wind": { + "speed": 3.21, + "deg": 268.001 + }, + "rain": { + "3h": 2.12 + }, + "sys": { + "pod": "d" + }, + "dt_txt": "2017-02-17 15:00:00" + }, + { + "dt": 1487354400, + "main": { + "temp": 275.639, + "temp_min": 275.639, + "temp_max": 275.639, + "pressure": 966.39, + "sea_level": 1040.65, + "grnd_level": 966.39, + "humidity": 95, + "temp_kf": 0 + }, + "weather": [ + { + "id": 500, + "main": "Rain", + "description": "light rain", + "icon": "10n" + } + ], + "clouds": { + "all": 88 + }, + "wind": { + "speed": 3.17, + "deg": 258.001 + }, + "rain": { + "3h": 0.7 + }, + "snow": { + "3h": 0.0775 + }, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-17 18:00:00" + }, + { + "dt": 1487365200, + "main": { + "temp": 275.459, + "temp_min": 275.459, + "temp_max": 275.459, + "pressure": 966.3, + "sea_level": 1040.8, + "grnd_level": 966.3, + "humidity": 96, + "temp_kf": 0 + }, + "weather": [ + { + "id": 500, + "main": "Rain", + "description": "light rain", + "icon": "10n" + } + ], + "clouds": { + "all": 88 + }, + "wind": { + "speed": 3.71, + "deg": 265.503 + }, + "rain": { + "3h": 1.16 + }, + "snow": { + "3h": 0.075 + }, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-17 21:00:00" + }, + { + "dt": 1487376000, + "main": { + "temp": 275.035, + "temp_min": 275.035, + "temp_max": 275.035, + "pressure": 966.43, + "sea_level": 1041.02, + "grnd_level": 966.43, + "humidity": 99, + "temp_kf": 0 + }, + "weather": [ + { + "id": 500, + "main": "Rain", + "description": "light rain", + "icon": "10n" + } + ], + "clouds": { + "all": 92 + }, + "wind": { + "speed": 3.56, + "deg": 273.5 + }, + "rain": { + "3h": 1.37 + }, + "snow": { + "3h": 0.1525 + }, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-18 00:00:00" + }, + { + "dt": 1487386800, + "main": { + "temp": 274.965, + "temp_min": 274.965, + "temp_max": 274.965, + "pressure": 966.36, + "sea_level": 1041.17, + "grnd_level": 966.36, + "humidity": 97, + "temp_kf": 0 + }, + "weather": [ + { + "id": 500, + "main": "Rain", + "description": "light rain", + "icon": "10n" + } + ], + "clouds": { + "all": 88 + }, + "wind": { + "speed": 2.66, + "deg": 285.502 + }, + "rain": { + "3h": 0.79 + }, + "snow": { + "3h": 0.52 + }, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-18 03:00:00" + }, + { + "dt": 1487397600, + "main": { + "temp": 274.562, + "temp_min": 274.562, + "temp_max": 274.562, + "pressure": 966.75, + "sea_level": 1041.57, + "grnd_level": 966.75, + "humidity": 98, + "temp_kf": 0 + }, + "weather": [ + { + "id": 500, + "main": "Rain", + "description": "light rain", + "icon": "10n" + } + ], + "clouds": { + "all": 88 + }, + "wind": { + "speed": 1.46, + "deg": 276.5 + }, + "rain": { + "3h": 0.08 + }, + "snow": { + "3h": 0.06 + }, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-18 06:00:00" + }, + { + "dt": 1487408400, + "main": { + "temp": 275.648, + "temp_min": 275.648, + "temp_max": 275.648, + "pressure": 967.21, + "sea_level": 1041.74, + "grnd_level": 967.21, + "humidity": 99, + "temp_kf": 0 + }, + "weather": [ + { + "id": 500, + "main": "Rain", + "description": "light rain", + "icon": "10d" + } + ], + "clouds": { + "all": 56 + }, + "wind": { + "speed": 1.5, + "deg": 251.008 + }, + "rain": { + "3h": 0.02 + }, + "snow": { + "3h": 0.03 + }, + "sys": { + "pod": "d" + }, + "dt_txt": "2017-02-18 09:00:00" + }, + { + "dt": 1487419200, + "main": { + "temp": 277.927, + "temp_min": 277.927, + "temp_max": 277.927, + "pressure": 966.06, + "sea_level": 1039.98, + "grnd_level": 966.06, + "humidity": 95, + "temp_kf": 0 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "02d" + } + ], + "clouds": { + "all": 8 + }, + "wind": { + "speed": 0.86, + "deg": 244.004 + }, + "rain": {}, + "snow": {}, + "sys": { + "pod": "d" + }, + "dt_txt": "2017-02-18 12:00:00" + }, + { + "dt": 1487430000, + "main": { + "temp": 278.367, + "temp_min": 278.367, + "temp_max": 278.367, + "pressure": 964.57, + "sea_level": 1038.35, + "grnd_level": 964.57, + "humidity": 89, + "temp_kf": 0 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "02d" + } + ], + "clouds": { + "all": 8 + }, + "wind": { + "speed": 1.62, + "deg": 79.5024 + }, + "rain": {}, + "snow": {}, + "sys": { + "pod": "d" + }, + "dt_txt": "2017-02-18 15:00:00" + }, + { + "dt": 1487440800, + "main": { + "temp": 273.797, + "temp_min": 273.797, + "temp_max": 273.797, + "pressure": 964.13, + "sea_level": 1038.48, + "grnd_level": 964.13, + "humidity": 91, + "temp_kf": 0 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "01n" + } + ], + "clouds": { + "all": 0 + }, + "wind": { + "speed": 2.42, + "deg": 77.0026 + }, + "rain": {}, + "snow": {}, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-18 18:00:00" + }, + { + "dt": 1487451600, + "main": { + "temp": 271.239, + "temp_min": 271.239, + "temp_max": 271.239, + "pressure": 963.39, + "sea_level": 1038.21, + "grnd_level": 963.39, + "humidity": 93, + "temp_kf": 0 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "01n" + } + ], + "clouds": { + "all": 0 + }, + "wind": { + "speed": 2.42, + "deg": 95.5017 + }, + "rain": {}, + "snow": {}, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-18 21:00:00" + }, + { + "dt": 1487462400, + "main": { + "temp": 269.553, + "temp_min": 269.553, + "temp_max": 269.553, + "pressure": 962.39, + "sea_level": 1037.44, + "grnd_level": 962.39, + "humidity": 92, + "temp_kf": 0 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "01n" + } + ], + "clouds": { + "all": 0 + }, + "wind": { + "speed": 1.96, + "deg": 101.004 + }, + "rain": {}, + "snow": {}, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-19 00:00:00" + }, + { + "dt": 1487473200, + "main": { + "temp": 268.198, + "temp_min": 268.198, + "temp_max": 268.198, + "pressure": 961.28, + "sea_level": 1036.51, + "grnd_level": 961.28, + "humidity": 84, + "temp_kf": 0 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "01n" + } + ], + "clouds": { + "all": 0 + }, + "wind": { + "speed": 1.06, + "deg": 121.5 + }, + "rain": {}, + "snow": {}, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-19 03:00:00" + }, + { + "dt": 1487484000, + "main": { + "temp": 267.295, + "temp_min": 267.295, + "temp_max": 267.295, + "pressure": 961.16, + "sea_level": 1036.45, + "grnd_level": 961.16, + "humidity": 86, + "temp_kf": 0 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "01n" + } + ], + "clouds": { + "all": 0 + }, + "wind": { + "speed": 1.17, + "deg": 155.005 + }, + "rain": {}, + "snow": {}, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-19 06:00:00" + }, + { + "dt": 1487494800, + "main": { + "temp": 272.956, + "temp_min": 272.956, + "temp_max": 272.956, + "pressure": 962.03, + "sea_level": 1036.85, + "grnd_level": 962.03, + "humidity": 84, + "temp_kf": 0 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "01d" + } + ], + "clouds": { + "all": 0 + }, + "wind": { + "speed": 1.66, + "deg": 195.002 + }, + "rain": {}, + "snow": {}, + "sys": { + "pod": "d" + }, + "dt_txt": "2017-02-19 09:00:00" + }, + { + "dt": 1487505600, + "main": { + "temp": 277.422, + "temp_min": 277.422, + "temp_max": 277.422, + "pressure": 962.23, + "sea_level": 1036.06, + "grnd_level": 962.23, + "humidity": 89, + "temp_kf": 0 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "01d" + } + ], + "clouds": { + "all": 0 + }, + "wind": { + "speed": 1.32, + "deg": 357.003 + }, + "rain": {}, + "snow": {}, + "sys": { + "pod": "d" + }, + "dt_txt": "2017-02-19 12:00:00" + }, + { + "dt": 1487516400, + "main": { + "temp": 277.984, + "temp_min": 277.984, + "temp_max": 277.984, + "pressure": 962.15, + "sea_level": 1035.86, + "grnd_level": 962.15, + "humidity": 87, + "temp_kf": 0 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "01d" + } + ], + "clouds": { + "all": 0 + }, + "wind": { + "speed": 1.58, + "deg": 48.5031 + }, + "rain": {}, + "snow": {}, + "sys": { + "pod": "d" + }, + "dt_txt": "2017-02-19 15:00:00" + }, + { + "dt": 1487527200, + "main": { + "temp": 272.459, + "temp_min": 272.459, + "temp_max": 272.459, + "pressure": 963.31, + "sea_level": 1037.81, + "grnd_level": 963.31, + "humidity": 90, + "temp_kf": 0 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "01n" + } + ], + "clouds": { + "all": 0 + }, + "wind": { + "speed": 1.16, + "deg": 75.5042 + }, + "rain": {}, + "snow": {}, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-19 18:00:00" + }, + { + "dt": 1487538000, + "main": { + "temp": 269.473, + "temp_min": 269.473, + "temp_max": 269.473, + "pressure": 964.65, + "sea_level": 1039.76, + "grnd_level": 964.65, + "humidity": 83, + "temp_kf": 0 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "01n" + } + ], + "clouds": { + "all": 0 + }, + "wind": { + "speed": 1.12, + "deg": 174.002 + }, + "rain": {}, + "snow": {}, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-19 21:00:00" + }, + { + "dt": 1487548800, + "main": { + "temp": 268.793, + "temp_min": 268.793, + "temp_max": 268.793, + "pressure": 965.92, + "sea_level": 1041.32, + "grnd_level": 965.92, + "humidity": 80, + "temp_kf": 0 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "01n" + } + ], + "clouds": { + "all": 0 + }, + "wind": { + "speed": 2.11, + "deg": 207.502 + }, + "rain": {}, + "snow": {}, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-20 00:00:00" + }, + { + "dt": 1487559600, + "main": { + "temp": 268.106, + "temp_min": 268.106, + "temp_max": 268.106, + "pressure": 966.4, + "sea_level": 1042.18, + "grnd_level": 966.4, + "humidity": 85, + "temp_kf": 0 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "01n" + } + ], + "clouds": { + "all": 0 + }, + "wind": { + "speed": 1.67, + "deg": 191.001 + }, + "rain": {}, + "snow": {}, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-20 03:00:00" + }, + { + "dt": 1487570400, + "main": { + "temp": 267.655, + "temp_min": 267.655, + "temp_max": 267.655, + "pressure": 967.4, + "sea_level": 1043.43, + "grnd_level": 967.4, + "humidity": 84, + "temp_kf": 0 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "01n" + } + ], + "clouds": { + "all": 0 + }, + "wind": { + "speed": 1.61, + "deg": 194.001 + }, + "rain": {}, + "snow": {}, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-20 06:00:00" + }, + { + "dt": 1487581200, + "main": { + "temp": 273.75, + "temp_min": 273.75, + "temp_max": 273.75, + "pressure": 968.84, + "sea_level": 1044.23, + "grnd_level": 968.84, + "humidity": 83, + "temp_kf": 0 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "01d" + } + ], + "clouds": { + "all": 0 + }, + "wind": { + "speed": 2.49, + "deg": 208.5 + }, + "rain": {}, + "snow": {}, + "sys": { + "pod": "d" + }, + "dt_txt": "2017-02-20 09:00:00" + }, + { + "dt": 1487592000, + "main": { + "temp": 279.302, + "temp_min": 279.302, + "temp_max": 279.302, + "pressure": 968.37, + "sea_level": 1042.52, + "grnd_level": 968.37, + "humidity": 83, + "temp_kf": 0 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "01d" + } + ], + "clouds": { + "all": 0 + }, + "wind": { + "speed": 2.46, + "deg": 252.001 + }, + "rain": {}, + "snow": {}, + "sys": { + "pod": "d" + }, + "dt_txt": "2017-02-20 12:00:00" + }, + { + "dt": 1487602800, + "main": { + "temp": 279.343, + "temp_min": 279.343, + "temp_max": 279.343, + "pressure": 967.9, + "sea_level": 1041.64, + "grnd_level": 967.9, + "humidity": 81, + "temp_kf": 0 + }, + "weather": [ + { + "id": 800, + "main": "Clear", + "description": "clear sky", + "icon": "01d" + } + ], + "clouds": { + "all": 0 + }, + "wind": { + "speed": 3.21, + "deg": 268.001 + }, + "rain": {}, + "snow": {}, + "sys": { + "pod": "d" + }, + "dt_txt": "2017-02-20 15:00:00" + }, + { + "dt": 1487613600, + "main": { + "temp": 274.443, + "temp_min": 274.443, + "temp_max": 274.443, + "pressure": 968.19, + "sea_level": 1042.66, + "grnd_level": 968.19, + "humidity": 88, + "temp_kf": 0 + }, + "weather": [ + { + "id": 801, + "main": "Clouds", + "description": "few clouds", + "icon": "02n" + } + ], + "clouds": { + "all": 24 + }, + "wind": { + "speed": 3.27, + "deg": 257.501 + }, + "rain": {}, + "snow": {}, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-20 18:00:00" + }, + { + "dt": 1487624400, + "main": { + "temp": 272.424, + "temp_min": 272.424, + "temp_max": 272.424, + "pressure": 968.38, + "sea_level": 1043.17, + "grnd_level": 968.38, + "humidity": 85, + "temp_kf": 0 + }, + "weather": [ + { + "id": 801, + "main": "Clouds", + "description": "few clouds", + "icon": "02n" + } + ], + "clouds": { + "all": 20 + }, + "wind": { + "speed": 3.57, + "deg": 255.503 + }, + "rain": {}, + "snow": {}, + "sys": { + "pod": "n" + }, + "dt_txt": "2017-02-20 21:00:00" + } + ], + "city": { + "id": 6940463, + "name": "Altstadt", + "coord": { + "lat": 48.137, + "lon": 11.5752 + }, + "country": "none" + } +} From 87d8e928cef9523034f565da875d32d94a5098ed Mon Sep 17 00:00:00 2001 From: Zaw Khing Date: Fri, 17 Feb 2023 11:57:59 +0000 Subject: [PATCH 06/10] Button onclick --- src/App.js | 1 - src/components/Header/Header.jsx | 19 +++++++++++-------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/App.js b/src/App.js index 0e04115..18c06c5 100644 --- a/src/App.js +++ b/src/App.js @@ -21,7 +21,6 @@ function App() { /> - {/* {FakeWeatherData.list.map((data) => (
Temp : {data && data.main.temp}
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 54420c7..e65ed8a 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -2,8 +2,12 @@ import "./Header.scss"; import React, { useState, useEffect } from "react"; const Header = ({ title }) => { - const [data, setData] = useState([]); - // const [city, setCity] = useState(""); + const [temp, setTemp] = useState([]); + const [city, setCity] = useState(""); + + function changeCity(){ + setTemp(temp); + } useEffect(() => { fetch( @@ -12,7 +16,7 @@ const Header = ({ title }) => { .then((res) => res.json()) .then((data) => { // console.log(data.main.temp.toFixed()); - setData(data); + setTemp(data); }) .catch((e) => console.log(e.message)); }, []); @@ -24,14 +28,13 @@ const Header = ({ title }) => { setCity(event.target.value)} + value={city} + onChange={(event) => setCity(event.target.value)} /> - - +
-

Temp:{data.main.temp.toFixed()}°C

+

Temp:{temp.main.temp.toFixed()}°C

{/* {data.main.temp ?

Temp:{data.main.temp}°C

: null} */} From a18dd57f38aa3b571f44ead9cc404a3a1ab99a25 Mon Sep 17 00:00:00 2001 From: Zaw Khing Date: Sun, 19 Feb 2023 19:23:02 +0000 Subject: [PATCH 07/10] Setting temp --- src/components/Header/Header.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index e65ed8a..6f8bd6c 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -2,11 +2,11 @@ import "./Header.scss"; import React, { useState, useEffect } from "react"; const Header = ({ title }) => { - const [temp, setTemp] = useState([]); + const [data, setData] = useState([]); const [city, setCity] = useState(""); function changeCity(){ - setTemp(temp); + setData(data); } useEffect(() => { @@ -15,8 +15,7 @@ const Header = ({ title }) => { ) .then((res) => res.json()) .then((data) => { - // console.log(data.main.temp.toFixed()); - setTemp(data); + setData(data); }) .catch((e) => console.log(e.message)); }, []); @@ -33,8 +32,9 @@ const Header = ({ title }) => { /> +
-

Temp:{temp.main.temp.toFixed()}°C

+

Temp:{data?.main?.temp?.toFixed()}°C

{/* {data.main.temp ?

Temp:{data.main.temp}°C

: null} */} From be3601266447ba63c3ce6484fe26e558ec0d0be2 Mon Sep 17 00:00:00 2001 From: Zaw Khing Date: Tue, 21 Feb 2023 22:14:58 +0000 Subject: [PATCH 08/10] Fetch temp from API --- src/components/Header/Header.jsx | 23 +++++++++-------------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 6f8bd6c..939c515 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -1,24 +1,20 @@ import "./Header.scss"; -import React, { useState, useEffect } from "react"; +import React, { useState} from "react"; const Header = ({ title }) => { - const [data, setData] = useState([]); + const [weatherData, setWeatherData] = useState([]); const [city, setCity] = useState(""); + - function changeCity(){ - setData(data); - } - - useEffect(() => { + function getNewWeather (){ fetch( - `https://api.openweathermap.org/data/2.5/weather?q=liverpool&units=metric&appid=3b86046cce0de3be7cfa8369f4540b37` + `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=3b86046cce0de3be7cfa8369f4540b37` ) .then((res) => res.json()) .then((data) => { - setData(data); + setWeatherData(data); }) - .catch((e) => console.log(e.message)); - }, []); + } return (
@@ -31,13 +27,12 @@ const Header = ({ title }) => { onChange={(event) => setCity(event.target.value)} /> - +
-

Temp:{data?.main?.temp?.toFixed()}°C

+

Temp: {weatherData?.main?.temp?.toFixed()}°C

- {/* {data.main.temp ?

Temp:{data.main.temp}°C

: null} */}
); }; From 85d523fb0d2398e563da1e123064c1508cbaa741 Mon Sep 17 00:00:00 2001 From: Zaw Khing Date: Fri, 24 Feb 2023 22:52:50 +0000 Subject: [PATCH 09/10] Matching up the weather icon images --- src/App.js | 4 +- src/App.scss | 53 ++++++++++++++++++++++++-- src/components/Header/Header.jsx | 41 ++++++++++++++------ src/components/Picture/WeatherIcon.jsx | 53 ++++++++++++++++++++++++++ 4 files changed, 135 insertions(+), 16 deletions(-) create mode 100644 src/components/Picture/WeatherIcon.jsx diff --git a/src/App.js b/src/App.js index 18c06c5..2aef0e2 100644 --- a/src/App.js +++ b/src/App.js @@ -13,13 +13,13 @@ function App() {
-
+ {/*
Current Weather -
+
*/} {/* {FakeWeatherData.list.map((data) => ( diff --git a/src/App.scss b/src/App.scss index 4d6dadb..fda296f 100644 --- a/src/App.scss +++ b/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; } \ No newline at end of file diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 939c515..6029e56 100644 --- a/src/components/Header/Header.jsx +++ b/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 (
-

{title}

- - setCity(event.target.value)} - /> +
+

{title}

+ setCity(event.target.value)} + /> + +
- + +
+

{weatherData?.weather?.[0]?.description}

+
-
-

Temp: {weatherData?.main?.temp?.toFixed()}°C

+
+

Temperature : {weatherData?.main?.temp?.toFixed()}°C

+
+
+

Humidity : {weatherData?.main?.humidity}%

+
+ +
+

Pressure : {weatherData?.main?.pressure}

+
+
); }; export default Header; + + diff --git a/src/components/Picture/WeatherIcon.jsx b/src/components/Picture/WeatherIcon.jsx new file mode 100644 index 0000000..a01547a --- /dev/null +++ b/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 ( +
+ {image.alt} +
+ ); +} + +export default WeatherIcon; From accfe59fe7179954b57496137d6aa44a9bb2a2ea Mon Sep 17 00:00:00 2001 From: Zaw Khing Date: Wed, 1 Mar 2023 21:16:22 +0000 Subject: [PATCH 10/10] Future weather and refactor code --- src/App.js | 60 ++++++++++++++----- .../CurrentWeather/CurrentWeather.jsx | 27 +++++++++ src/components/FutureForecast.jsx | 16 +++++ src/components/Header/Header.jsx | 46 +++----------- src/components/Picture/WeatherIcon.jsx | 6 +- 5 files changed, 100 insertions(+), 55 deletions(-) create mode 100644 src/components/CurrentWeather/CurrentWeather.jsx create mode 100644 src/components/FutureForecast.jsx diff --git a/src/App.js b/src/App.js index 2aef0e2..ffa120a 100644 --- a/src/App.js +++ b/src/App.js @@ -1,33 +1,61 @@ import "./App.scss"; +import React, { useState } from "react"; import Header from "./components/Header/Header"; import Footer from "./components/Footer/Footer"; -// import FakeWeatherData from "./data/FakeWeather.json"; +import WeatherIcon from "./components/Picture/WeatherIcon"; +import CurrentWeather from "./components/CurrentWeather/CurrentWeather"; +import FutureWeather from "./components/FutureForecast"; 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 (
-
+
- {/*
- Current Weather -
*/} - +
+ {/* */} + {weatherData?.list?.map((icon) => ( + + ))} - {/* {FakeWeatherData.list.map((data) => ( -
Temp : {data && data.main.temp}
- ))} */} + {weatherData?.list?.map((current) => ( + + ))} +
- {/*
{location}
*/} - {/*
{temp && temp.list[0].main.temp}
*/} +
+ {weatherData?.list?.map((future) => ( + + ))} +
diff --git a/src/components/CurrentWeather/CurrentWeather.jsx b/src/components/CurrentWeather/CurrentWeather.jsx new file mode 100644 index 0000000..0702552 --- /dev/null +++ b/src/components/CurrentWeather/CurrentWeather.jsx @@ -0,0 +1,27 @@ +import React from 'react' + +function CurrentWeather({ description, temp, humidity, pressure }) { + return ( + <> +
+

{description}

+
+ +
+

Temperature : {temp}°C

+
+ +
+
+

Humidity : {humidity}%

+
+ +
+

Pressure : {pressure}

+
+
+ + ); +} + +export default CurrentWeather \ No newline at end of file diff --git a/src/components/FutureForecast.jsx b/src/components/FutureForecast.jsx new file mode 100644 index 0000000..7c0bb18 --- /dev/null +++ b/src/components/FutureForecast.jsx @@ -0,0 +1,16 @@ +import React from "react"; +import WeatherIcon from "./Picture/WeatherIcon"; + + +export default function FutureWeather({ time, iconId, temp }) { + + const formattedTime = time.split(" ")[1].slice(0,5) + + return ( +
+

{formattedTime}

+ +

{temp}

+
+ ); +} diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 6029e56..bc9f44c 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -1,22 +1,9 @@ import "./Header.scss"; -import WeatherIcon from "../Picture/WeatherIcon"; -import React, { useState} from "react"; +// import WeatherIcon from "../Picture/WeatherIcon"; +import React, { useState } from "react"; - -const Header = ({ title }) => { - const [weatherData, setWeatherData] = useState([]); +const Header = ({ title, getNewWeather, weatherData }) => { 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 (
@@ -25,35 +12,18 @@ const Header = ({ title }) => { setCity(event.target.value)} /> - -
- - -
-

{weatherData?.weather?.[0]?.description}

-
- -
-

Temperature : {weatherData?.main?.temp?.toFixed()}°C

+
-
-
-

Humidity : {weatherData?.main?.humidity}%

-
- -
-

Pressure : {weatherData?.main?.pressure}

-
-
+
); }; export default Header; - - diff --git a/src/components/Picture/WeatherIcon.jsx b/src/components/Picture/WeatherIcon.jsx index a01547a..f9c7175 100644 --- a/src/components/Picture/WeatherIcon.jsx +++ b/src/components/Picture/WeatherIcon.jsx @@ -7,6 +7,7 @@ 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" }, @@ -17,6 +18,7 @@ const images = { clear: { src: clear, alt: "clear" }, partlyCloudy: { src: partlyCloudy, alt: "partly cloudy" }, mostlyCloudy: { src: mostlyCloudy, alt: "mostly cloudy" }, + unknown: { src: unknown, alt: "unknown" }, }; @@ -35,8 +37,10 @@ function selectImage(weatherId){ return images.clear; } else if (weatherId === 801) { return images.partlyCloudy; + } else if (weatherId < 805 && weatherId > 801) { + return images.mostlyCloudy; } - return images.mostlyCloudy; + return images.unknown; } const WeatherIcon = ({weatherId}) =>{