Weather App

.env

@@ -0,0 +1 @@
+PUBLIC_URL=`https://zach7815.github.io/weather-app-bootcamp`

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

package.json

@@ -1,13 +1,25 @@
 {
   "name": "weather-app-bootcamp",
   "version": "0.1.0",
-  "private": true,
+  "private": false,
+  "homepage": "https://zach7815.github.io/weather-app-bootcamp/",
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.14.6",
+    "axios": "^1.4.0",
+    "dotenv": "^16.3.1",
+    "gh-pages": "^6.0.0",
+    "memfs": "^4.2.1",
+    "moment": "^2.29.4",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-scripts": "5.0.1"
+    "react-scripts": "5.0.1",
+    "recharts": "^2.7.3"
   },
   "scripts": {
+    "predeploy": "npm run build",
+    "deploy": "gh-pages  -d build",
     "start": "react-scripts start",
     "build": "react-scripts build"
   },
@@ -27,5 +39,15 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "eslint": "^8.47.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0"
   }
 }

src/App.css

@@ -1,19 +1,98 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 .App {
   text-align: center;
+  background-color: #282c34;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  opacity: 0.8;
 }
 
 .App-logo {
-  height: 40vmin;
+  height: 20vmin;
   pointer-events: none;
 }
 
 .App-header {
-  background-color: #282c34;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+  font-size: 1.5rem;
+  color: white;
+  width: max-content;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+form input {
+  height: 1.5rem;
+}
+
+video {
+  position: absolute;
+  z-index: -2;
+  top: 0;
+  left: 0;
+  width: 100vw;
+}
+.tomorrows-temp {
+  margin-bottom: 4rem;
+}
+
+.weather-info {
+  background: rgba(73, 124, 191, 1);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  backdrop-filter: blur(5.5px);
+  -webkit-backdrop-filter: blur(5.5px);
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  padding: 1.5rem;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  grid-template-rows: repeat(4 1fr);
+}
+
+.item1 {
+  grid-row: 1; /* Item 1 spans all three rows */
+  grid-column: 1 / span 2;
+}
+
+.item2 {
+  grid-row: 2;
+  grid-column: 1 / span 2;
+  justify-self: center;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.item2:first-child {
+  justify-self: flex-start;
+}
+
+.item4 {
+  grid-row: 4;
+  grid-column: 1 / span 2; /* Item 4 spans the entire third row */
+  justify-self: center;
+}
+
+.css-8atqhb {
+  grid-column: 1;
   color: white;
 }
+
+.flex-container {
+  display: flex;
+}

src/App.js

@@ -1,20 +1,111 @@
-import React from "react";
-import logo from "./logo.png";
-import "./App.css";
+import React, { useEffect, useState } from 'react';
+import './App.css';
+import { Input } from './components/Input';
+import { getWeatherIcons, getWeatherVideos } from './utils/weatherDescriptions';
+import { DisplayInfo } from './components/DisplayInfo';
+import BasicTabs from './components/TabContainer';
 
-class App extends React.Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-        </header>
-      </div>
-    );
-  }
-}
+const App = () => {
+  const [city, setCity] = useState('');
+  const [weather, setWeather] = useState();
+  const [fiveDayWeather, setFiveDayWeather] = useState();
+  const [loaded, setLoaded] = useState(false);
+  const [fiveDayTemps, setFiveDayTemps] = useState();
+  const [displayInfo, setDisplayInfo] = useState({
+    weatherIcon: null,
+    temp: null,
+    feels_like: null,
+    temp_min: null,
+    temp_max: null,
+    weather_video: null,
+  });
 
+  useEffect(() => {
+    if (weather) {
+      const { weather: typeOfWeather } = weather;
+      const { main: temperature } = weather;
+      const { temp, feels_like, temp_min, temp_max } = temperature;
+      const iconName = getWeatherIcons(typeOfWeather[0].main);
+      console.log(typeOfWeather[0].main);
+      const backgroundVideo = getWeatherVideos(typeOfWeather[0].main);
+      setDisplayInfo((prevDisplayInfo) => ({
+        ...prevDisplayInfo,
+        weatherIcon: require(`./images/animated/${iconName}`),
+        temp: temp,
+        feels_like: feels_like,
+        temp_min: temp_min,
+        temp_max: temp_max,
+        weather_video: backgroundVideo,
+      }));
+      setLoaded(true);
+    }
+  }, [weather]);
+  useEffect(() => {
+    if (fiveDayWeather) {
+      const mainContent = document.querySelector('.App-header');
+      mainContent.style.width = 'min-content';
+      console.log(fiveDayWeather);
+      const { list } = fiveDayWeather;
+      let days = [];
+      let subArray = [];
+
+      list.forEach((object, index) => {
+        const { dt, main, weather } = object;
+        let weatherIcon = getWeatherIcons(weather.main);
+        console.log(`weatherIcon is ${weatherIcon}`);
+        // Push the current object to the subarray
+        subArray.push({
+          dt: dt,
+          weather: weatherIcon,
+          temp: main,
+        });
+
+        // Check if the subarray has reached 8 objects or if it's the last object in the list
+        if (subArray.length === 8 || index === list.length - 1) {
+          // Push the subarray to the 'days' array
+          days.push(subArray);
+
+          // Reset the subarray for the next day
+          subArray = [];
+        }
+      });
+
+      setFiveDayTemps(days);
+    }
+  }, [fiveDayWeather, setFiveDayTemps]);
+
+  return (
+    <div className="App">
+      {loaded && (
+        <video
+          key={displayInfo.weather_video}
+          autoPlay
+          muted
+          loop
+          className="background-video"
+        >
+          <source
+            src={`${process.env.PUBLIC_URL}/weather-app-bootcamp/videos/${displayInfo.weather_video}`}
+            type="video/mp4"
+          />
+          {/* Add additional source tags for other supported video formats */}
+        </video>
+      )}
+      <header className="App-header">
+        <div className="weather-info">
+          {loaded && <h1 className="item1">{weather.name}</h1>}
+          {loaded && <DisplayInfo displayInfo={displayInfo} />}
+          {loaded && <BasicTabs fiveDayData={fiveDayTemps} />}
+          <Input
+            className="item3"
+            city={city}
+            setCity={setCity}
+            setWeather={setWeather}
+            setFiveDayWeather={setFiveDayWeather}
+          />
+        </div>
+      </header>
+    </div>
+  );
+};
 export default App;

src/components/DisplayInfo.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const DisplayInfo = ({ displayInfo }) => {
+  console.log(displayInfo);
+  return (
+    <div className="item2">
+      <div>
+        <h4 className="todays-temp"> Todays weather</h4>
+        <img src={displayInfo.weatherIcon} className="App-logo " alt="logo" />
+      </div>
+      <div>
+        <p>current temp: {displayInfo.temp}</p>
+        <p>feels like: {displayInfo.feels_like}</p>
+        <p>min temp: {displayInfo.temp_min}</p>
+        <p>max temp: {displayInfo.temp_max}</p>
+      </div>
+    </div>
+  );
+};

src/components/Input.js

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import axios from 'axios';
+
+export const Input = ({ city, setCity, setWeather, setFiveDayWeather }) => {
+  const key = 'affe432d2fa46aa11c96860a17ff801b';
+  const url = `https://api.openweathermap.org/geo/1.0/direct?q=${city}&limit=5&appid=${key}`;
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    axios
+      .get(url)
+      .then((response) => response.data[0])
+      .then((cityGeoData) => {
+        const weatherRequest = axios.get(
+          `https://api.openweathermap.org/data/2.5/weather?lat=${cityGeoData.lat}&lon=${cityGeoData.lon}&appid=${key}&units=metric`
+        );
+
+        const forecastRequest = axios.get(
+          `https://api.openweathermap.org/data/2.5/forecast?lat=${cityGeoData.lat}&lon=${cityGeoData.lon}&appid=${key}&units=metric`
+        );
+
+        return Promise.all([weatherRequest, forecastRequest]);
+      })
+      .then((responses) => {
+        const weatherData = responses[0].data;
+        const forecastData = responses[1].data;
+
+        setWeather(weatherData);
+        setFiveDayWeather(forecastData);
+
+        setCity('');
+      })
+      .catch((error) => {
+        // Handle error
+        console.error(error);
+      });
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit} className="item4">
+        <label></label> Enter your city
+        <input
+          value={city}
+          onChange={(e) => {
+            setCity(e.target.value);
+          }}
+        ></input>
+        <button>Get weather report</button>
+      </form>
+    </>
+  );
+};