Merge pull request #4 from WesloTheWeb/feat/update-qol

Feat/update qol
WesloTheWeb · Aug 21, 2022 · 5de3720 · 5de3720
2 parents d6b154a + a20ad56
commit 5de3720
Show file tree

Hide file tree

Showing 12 changed files with 10,157 additions and 3,935 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,19 +1,19 @@
-{
-  "name": "weather-app",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "next": "12.0.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "eslint": "7.32.0",
-    "eslint-config-next": "12.0.3"
-  }
-}
+{
+  "name": "weather-app",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "12.0.3",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "devDependencies": {
+    "eslint": "7.32.0",
+    "eslint-config-next": "12.0.3"
+  }
+}
diff --git a/pages/index.js b/pages/index.js
@@ -1,36 +1,38 @@
-import React, { useState } from 'react';
-import Head from 'next/head';
-import LocationInput from '../src/containers/LocationInput/LocationInput';
-import ForeCast from '../src/containers/ForeCast/ForeCast';
-import Footer from '../src/components/Footer/Footer';
-import { QueryContext } from '../src/context/QueryContext';
-
-export default function Home() {
-
-  const [query, setQuery] = useState(''); // For query input
-  const [weather, setWeather] = useState({}); // Values for locatiion
-
-  const providerValues = React.useMemo(() => ({
-    query, setQuery,
-    weather, setWeather,
-}), [query, weather]);
-
-  return (
-    <div>
-      <Head>
-        <title>Weather Application</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <main>
-        <h1> Welcome to the <br /><span className="title">Weather App</span></h1>
-        <p className="instructions">To use, simply enter a city or zip code below and press enter.</p>
-        <QueryContext.Provider value={providerValues}>
-          <LocationInput />
-          <ForeCast value={providerValues}/>
-        </QueryContext.Provider>
-          <Footer />
-      </main>
-    </div>
-  )
+import React, { useState } from 'react';
+import Head from 'next/head';
+import LocationInput from '../src/containers/LocationInput/LocationInput';
+import ForeCast from '../src/containers/ForeCast/ForeCast';
+import Footer from '../src/components/Footer/Footer';
+import { QueryContext } from '../src/context/QueryContext';
+
+export default function Home() {
+
+  const [query, setQuery] = useState(''); // For query input
+  const [weather, setWeather] = useState({}); // Values for locatiion
+  const [location, setLocation] = useState({});
+
+  const providerValues = React.useMemo(() => ({
+    query, setQuery,
+    weather, setWeather,
+    location, setLocation
+}), [query, weather, location]);
+
+  return (
+    <div>
+      <Head>
+        <title>Weather Application</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main>
+        <h1> Welcome to the <br /><span className="title">Weather App</span></h1>
+        <p className="instructions">To use, simply enter a city or zip code below and press enter.</p>
+        <QueryContext.Provider value={providerValues}>
+          <LocationInput />
+          <ForeCast value={providerValues}/>
+        </QueryContext.Provider>
+          <Footer />
+      </main>
+    </div>
+  )
 };
diff --git a/src/components/ForeCastCard/ForeCastCard.js b/src/components/ForeCastCard/ForeCastCard.js
@@ -1,35 +1,43 @@
-import React from 'react';
-import classes from './ForeCastCard.module.css';
-
-const { forecastCard, cityBlock, weatherBlock, weatherBlockDetails } = classes;
-
-const ForeCastCard = (
-    { city, state, country, weatherFahrenheight, weatherCelsius, feelsLikeF, feelsLikeC, timeZone, aqCarbonLevels,
-        aqOxygenLevels, humidity, visMiles, visKM }) => {
-    return (
-        <div className={forecastCard}>
-            <section className={cityBlock}>
-                <h2>{city}, {state}</h2>
-                <span>{country}</span>
-                <div>
-                    <p>The local date and time for this area is {timeZone}. Visibility is currently {visMiles} miles / {visKM} kilometers</p>
-                    <h4>Feels like...</h4>
-                    <p>{feelsLikeF}°F | {feelsLikeC}°C</p>
-                </div>
-            </section>
-            <section className={weatherBlock}>
-                <h3>{weatherFahrenheight}°F | {weatherCelsius}°C</h3>
-                <div className={weatherBlockDetails}>
-                    <p>
-                        <label>Air quality Index:</label>
-                        <li>Carbon levels: {Math.round(aqCarbonLevels)} </li>
-                        <li>Oxygen Levels levels: {Math.round(aqOxygenLevels)} </li>
-                    </p>
-                    <p><label>Humidity:</label> {humidity}</p>
-                </div>
-            </section>
-        </div>
-    );
-};
-
+import React from 'react';
+import classes from './ForeCastCard.module.css';
+
+const { forecastCard, cityBlock, conditionContainer, weatherBlock, weatherBlockDetails } = classes;
+
+const ForeCastCard = (
+    { city, state, country, conditions, conditionImg, convertTime, weatherFahrenheight, weatherCelsius, feelsLikeF, feelsLikeC, timeZone, aqCarbonLevels, sunrise, sunset,
+        aqOxygenLevels, humidity, visMiles, visKM }) => {
+    return (
+        <div className={forecastCard}>
+            <section className={cityBlock}>
+                <h2>{city}, {state}</h2>
+                <span>{country}</span>
+                <div>
+                    <div>
+                        The local time for this area is {convertTime(timeZone)} . Visibility is currently {visMiles} miles / {visKM} kilometers
+                        <p>Sunrise is at {sunrise} </p>
+                        <p>Sunset is at {sunset}</p>
+                    </div>
+                    <h4>Feels like...</h4>
+                    <p>{feelsLikeF}°F | {feelsLikeC}°C</p>
+                    <div className={conditionContainer}>
+                        <p>Current conditions: <b>{conditions}</b></p>
+                        <img src={`${conditionImg}`} alt="clouds" />
+                    </div>
+                </div>
+            </section>
+            <section className={weatherBlock}>
+                <h3>{weatherFahrenheight}°F | {weatherCelsius}°C</h3>
+                <div className={weatherBlockDetails}>
+                    <p>
+                        <label>Air quality Index:</label>
+                        <li>Carbon levels: {Math.round(aqCarbonLevels)} </li>
+                        <li>Oxygen Levels levels: {Math.round(aqOxygenLevels)} </li>
+                    </p>
+                    <p><label>Humidity:</label> {humidity}</p>
+                </div>
+            </section>
+        </div>
+    );
+};
+
 export default ForeCastCard;
diff --git a/src/components/ForeCastCard/ForeCastCard.module.css b/src/components/ForeCastCard/ForeCastCard.module.css
@@ -1,67 +1,71 @@
-.forecastCard {
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    margin: 0 auto;
-    text-align: center;
-}
-
-@media only screen and (max-width: 1023px) {
-    .forecastCard {
-        display: block;
-    }
-}
-
-.forecastCard p, .forecastCard h2, .forecastCard h3 {
-    color: var(--white);
-}
-
-.forecastCard h2 {
-    font-size: 4rem;
-    margin: 0;
-}
-
-@media only screen and (max-width: 1023px) {
-    .forecastCard h2 {
-        font-size: 1.2rem;
-     }
-}
-
-.cityBlock {
-    background-color: rgba(0, 0, 0, 0.2);
-    text-align: left;
-    padding: .75rem 3rem;
-    border-radius: 15px;    
-}
-
-@media only screen and (max-width: 1023px) {
-    .cityBlock {
-        padding: .75rem 1rem;
-     }
-}
-
-.weatherBlock {
-    text-align: left;
-}
-
-@media only screen and (max-width: 1023px) {
-    .weatherBlock {
-        text-align: center;
-    }    
-
-    .forecastCard .weatherBlock h3 {
-        font-size: 2rem;
-    }
-}
-
-.weatherBlock h3 {
-    font-size: 3rem;
-    margin: 0;
-}
-
-.weatherBlockDetails {
-    background-color: rgba(0, 0, 0, 0.2);
-    border-radius: 15px;    
-    padding: 0.25rem 1.2rem;
-    margin: 1rem 0;
+.conditionContainer {
+    display: flex;
+}
+
+.forecastCard {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    margin: 0 auto;
+    text-align: center;
+}
+
+@media only screen and (max-width: 1023px) {
+    .forecastCard {
+        display: block;
+    }
+}
+
+.forecastCard p, .forecastCard h2, .forecastCard h3 {
+    color: var(--white);
+}
+
+.forecastCard h2 {
+    font-size: 4rem;
+    margin: 0;
+}
+
+@media only screen and (max-width: 1023px) {
+    .forecastCard h2 {
+        font-size: 1.2rem;
+     }
+}
+
+.cityBlock {
+    background-color: rgba(0, 0, 0, 0.2);
+    text-align: left;
+    padding: .75rem 3rem;
+    border-radius: 15px;    
+}
+
+@media only screen and (max-width: 1023px) {
+    .cityBlock {
+        padding: .75rem 1rem;
+     }
+}
+
+.weatherBlock {
+    text-align: left;
+}
+
+@media only screen and (max-width: 1023px) {
+    .weatherBlock {
+        text-align: center;
+    }    
+
+    .forecastCard .weatherBlock h3 {
+        font-size: 2rem;
+    }
+}
+
+.weatherBlock h3 {
+    font-size: 3rem;
+    margin: 0;
+}
+
+.weatherBlockDetails {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 15px;    
+    padding: 0.25rem 1.2rem;
+    margin: 1rem 0;
 }
diff --git a/src/components/HourlyCard/HourlyCard.js b/src/components/HourlyCard/HourlyCard.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import classes from './HourlyCard.module.css';
+
+const { CardContainer } = classes;
+
+const HourlyCard = ({ cloud, convertTime, hour, icon, altIcon, celTemperature, fahTemperature, rain, snow, windDir, wind }) => {
+    return (
+        <div className={CardContainer}>
+            <label>
+                {convertTime(hour)}</label>
+            <div>
+                <p>
+                    {fahTemperature} &deg;F
+                    | {celTemperature} &deg;C
+                </p>
+                <img src={`${icon}`} alt={`${altIcon}`} />
+            </div>
+            <p>Chance of rain: {rain}%</p>
+            <p>Chance of snow: {snow}%</p>
+            <p>Wind-direction: {windDir}</p>
+            <p>Wind mph: {wind}</p>
+            <p>Cloud: {cloud}% coverage</p>
+        </div>
+    );
+};
+
+export default HourlyCard;
diff --git a/src/components/HourlyCard/HourlyCard.module.css b/src/components/HourlyCard/HourlyCard.module.css
@@ -0,0 +1,22 @@
+.CardContainer {
+    position: relative;
+    background-color: rgba(0, 0, 0, 0.2);
+    color: var(--white);
+    border: #FFF solid 1.5px;
+    padding: .5rem;
+    margin: 0 auto; 
+    /* transition-timing-function: ease-in; */
+    transition: all 0.10s ease-in-out;
+}
+
+@media only screen and (max-width: 1023px) {
+    .CardContainer  {
+        margin: 1.5rem auto;
+    }
+}
+
+
+.CardContainer h2 {
+    font-size: 4rem;
+    margin: 0;
+}