diff --git a/app/components/renderHumidity.tsx b/app/components/renderHumidity.tsx
new file mode 100644
index 0000000..660cfcc
--- /dev/null
+++ b/app/components/renderHumidity.tsx
@@ -0,0 +1,47 @@
+import { useSelector } from "react-redux";
+import { WeatherData, WeatherContainer } from "../store/slices/weather";
+import {
+ Sparklines,
+ SparklinesLine,
+ SparklinesReferenceLine,
+} from "react-sparklines";
+
+export default function RenderHumidity() {
+ const conditions = useSelector((state: WeatherData) => state.weather.weather); //pulls current state in redux store
+
+ const findHumidity = (condition: WeatherContainer) => {
+ return condition?.list?.map?.(
+ (weather: WeatherContainer) => weather.main.humidity
+ ); //takes the humidity over the next 5 days
+ };
+
+ return (
+
+ {conditions?.map((condition: WeatherContainer, index: number) => {
+ const humidityArray = findHumidity(condition); //sets that humidity in an array
+
+ const sum = humidityArray?.reduce(
+ (accumulator: number, currentValue: number) => {
+ return accumulator + currentValue;
+ },
+ 0
+ );
+ const averageTotal = sum / humidityArray?.length; //finds average humidity
+ const humidityAverage = Math.round(averageTotal); //rounds to whole number
+
+ if (condition === undefined) {
+ return; //if no conditions are passed through, do not return anything
+ }
+ return (
+
+
+
+
+
+
{humidityAverage}%
+
+ );
+ })}
+
+ {conditions?.map((condition: WeatherContainer, index: number) => {
+ const pressureArray = findPressure(condition); //sets that pressure in an array
+
+ const sum = pressureArray?.reduce(
+ (accumulator: number, currentValue: number) => {
+ return accumulator + currentValue;
+ },
+ 0
+ );
+ const averageTotal = sum / pressureArray?.length; //finds average pressure
+ const pressureAverage = Math.round(averageTotal); //rounds to whole number
+
+ if (condition === undefined) {
+ return; //if no conditions are passed through, do not return anything
+ }
+ return (
+
+
+
+
+
+
{pressureAverage}hPa
+
+ );
+ })}
+
+ {conditions?.map((condition: WeatherContainer, index: number) => {
+ const tempArray = findTemp(condition); //sets that temp in an array
+
+ const sum = tempArray?.reduce(
+ (accumulator: number, currentValue: number) => {
+ return accumulator + currentValue;
+ },
+ 0
+ );
+ const averageTotal = sum / tempArray?.length; //finds average temperature
+ const tempAverage = Math.round(averageTotal); //rounds to whole number
+
+ if (condition === undefined) {
+ return; //if no conditions are passed through, do not return anything
+ }
+ return (
+
+
+
+
+
+
{tempAverage}ºF
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default SearchBar;
diff --git a/app/components/searchCity.tsx b/app/components/searchCity.tsx
new file mode 100644
index 0000000..749c455
--- /dev/null
+++ b/app/components/searchCity.tsx
@@ -0,0 +1,34 @@
+"use client";
+import { useSelector, useDispatch } from "react-redux";
+import { LocationParams } from "../store/slices/locations";
+import { useEffect } from "react";
+import { AppDispatch } from "../store/configureStore";
+import { fetchWeather } from "../store/slices/weather";
+
+export default function SearchCity() {
+ const locations = useSelector(
+ (state: LocationParams) => state.location.location
+ );
+
+ const dispatch = useDispatch();
+ useEffect(() => {
+ dispatch(fetchWeather(locations));
+ }, [dispatch, locations]);
+
+ return locations?.map((location: LocationParams, index: number) => {
+ if (locations[locations.length - 1][0] === undefined) {
+ alert("Please enter a valid city name");
+ return;
+ // trying to address edge casing or invalid entry, alert is mapped in response but I could not figure out how to only alert once.
+ }
+ return (
+
+
+
+
{location[location.length - 1].name}
+
+
+
-
- Get started by editing
- app/page.js
-
-
-
-
-
-
-
-
- )
-}
diff --git a/app/page.module.css b/app/page.module.css
index 6676d2c..ad2ff56 100644
--- a/app/page.module.css
+++ b/app/page.module.css
@@ -1,3 +1,16 @@
+.button {
+ height: auto;
+ width: auto;
+ background-color: blue;
+ color: white;
+ border-radius: 5px;
+ margin: 10px;
+}
+
+.button:hover {
+ background-color: lightblue;
+}
+
.main {
display: flex;
flex-direction: column;
@@ -51,7 +64,9 @@
border-radius: var(--border-radius);
background: rgba(var(--card-rgb), 0);
border: 1px solid rgba(var(--card-border-rgb), 0);
- transition: background 200ms, border 200ms;
+ transition:
+ background 200ms,
+ border 200ms;
}
.card span {
@@ -97,7 +112,7 @@
.center::before,
.center::after {
- content: '';
+ content: "";
left: 50%;
position: absolute;
filter: blur(45px);
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..c84f825
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,40 @@
+"use client";
+import styles from "./page.module.css";
+import "bootstrap/dist/css/bootstrap.min.css";
+import SearchBar from "./components/searchBar";
+import RenderWeather from "./components/renderWeather";
+
+export default function App(): JSX.Element {
+ return (
+
+
+
+
+
Weather App
+
+
+
+
+
+
City
+
+
+
Temperature (ºF)
+
+
+
Humidity (%)
+
+
+
Pressure (hPa)
+
+
+
+
+
+
+
+