rocketacademy · Cathykk9644 · Aug 26, 2023 · Aug 26, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,13 +1,18 @@
 {
   "name": "weather-app-bootcamp",
+  "homepage": "https://cathykk9644.github.io/weather-app-bootcamp/",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^1.4.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-scripts": "5.0.1"
+    "react-scripts": "5.0.1",
+    "recharts": "^2.8.0"
   },
   "scripts": {
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
     "start": "react-scripts start",
     "build": "react-scripts build"
   },
@@ -27,5 +32,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "gh-pages": "^6.0.0"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,19 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Rocket Bootcamp Project</title>
+    <title>Weather App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -1,20 +1,158 @@
 import React from "react";
-import logo from "./logo.png";
-import "./App.css";
-
-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>
-    );
-  }
+import { useState } from "react";
+import axios from "axios";
+import {
+  LineChart,
+  Line,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+  Tooltip,
+  Legend,
+} from "recharts";
+
+const api = {
+  key: "fc76fdb0995b5aa504d0607ab074c672",
+  base: "https://api.openweathermap.org/data/2.5/",
+};
+
+function App() {
+  const [query, setQuery] = useState("");
+  const [weather, setWeather] = useState({});
+  const [iconUrl, setIconUrl] = useState("");
+  const [forecast, setForecast] = useState([]);
+
+  const search = async (evt) => {
+    if (evt.key === "Enter") {
+      try {
+        const res = await axios.get(
+          `${api.base}weather?q=${query}&units=metric&APPID=${api.key}`
+        );
+
+        // get the forecast
+        const resForecast = await axios.get(
+          `${api.base}forecast?q=${query}&units=metric&appid=${api.key}`
+        );
+
+        setWeather(res.data);
+        const iconCode = res.data.weather[0].icon;
+        const iconUrl = `http://openweathermap.org/img/wn/${iconCode}.png`;
+        setIconUrl(iconUrl);
+        setQuery("");
+        setForecast(resForecast.data.list);
+        console.log(res.data);
+        console.log(resForecast.data);
+      } catch (err) {
+        console.error(err);
+      }
+    }
+  };
+
+  const dateBuilder = (d) => {
+    let months = [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ];
+    let days = [
+      "Sunday",
+      "Monday",
+      "Tuesday",
+      "Wednesday",
+      "Thursday",
+      "Friday",
+      "Saturday",
+    ];
+
+    let day = days[d.getDay()];
+    let date = d.getDate();
+    let month = months[d.getMonth()];
+    let year = d.getFullYear();
+
+    return `${day} ${date} ${month} ${year}`;
+  };
+
+  // Function to transform forecast data for recharts
+  const formatForecastData = (forecastData) => {
+    return forecastData.map((item) => ({
+      name: new Date(item.dt * 1000).toLocaleDateString(),
+      temperature: item.main.temp,
+    }));
+  };
+
+  return (
+    <div
+      className={
+        typeof weather.main != "undefined"
+          ? weather.main.temp > 16
+            ? "app warm"
+            : "app"
+          : "app"
+      }
+    >
+      <main>
+        <div className="search-box">
+          <input
+            type="text"
+            className="search-bar"
+            placeholder="Search City & Press Enter..."
+            onChange={(e) => setQuery(e.target.value)}
+            value={query}
+            onKeyPress={search}
+          />
+        </div>
+        {typeof weather.main != "undefined" ? (
+          <div>
+            <div className="location-box">
+              <div className="location">
+                {weather.name}, {weather.sys.country}
+              </div>
+              <div className="date">{dateBuilder(new Date())}</div>
+            </div>
+            <div className="weather-box">
+              <div className="temp">{Math.round(weather.main.temp)}°c</div>
+              <div className="weather">{weather.weather[0].main}</div>
+              <div className="weather-icon">
+                <img src={iconUrl} alt="Weather icon" />
+              </div>
+            </div>
+            {forecast.length > 0 && (
+              <div className="forecast-box">
+                <h2>5-Day Forecast</h2>
+                <LineChart
+                  width={600}
+                  height={300}
+                  data={formatForecastData(forecast)}
+                >
+                  <Line
+                    type="monotone"
+                    dataKey="temperature"
+                    stroke="#8884d8"
+                  />
+                  <CartesianGrid stroke="#ccc" />
+                  <XAxis dataKey="name" />
+                  <YAxis domain={[0, 40]} />
+                  <Tooltip />
+                  <Legend />
+                </LineChart>
+              </div>
+            )}
+          </div>
+        ) : (
+          ""
+        )}
+      </main>
+    </div>
+  );
 }
 
 export default App;
diff --git a/src/assets/cold-bg.jpg b/src/assets/cold-bg.jpg
diff --git a/src/assets/warm-bg.jpg b/src/assets/warm-bg.jpg