Marina's weather app

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^1.6.2",
+    "dotenv": "^16.3.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1"

src/App.css

@@ -7,13 +7,24 @@
   pointer-events: none;
 }
 
-.App-header {
-  background-color: #282c34;
+.App {
+  background-color: rgb(242, 203, 96);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
+  color: rgb(18, 17, 17);
+}
+
+.input-field {
+  min-width: 250px;
+  height: 30px;
+  font-size: 15px;
+  border: 0;
+}
+.button {
+  height: 35px;
+  min-width: 100px;
 }

src/App.js

@@ -1,17 +1,84 @@
 import React from "react";
-import logo from "./logo.png";
 import "./App.css";
+import axios from "axios";
 
 class App extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      input: " ",
+      weatherData: [],
+    };
+  }
+
+  handleChange = (e) => {
+    const inputValue = e.target.value;
+    this.setState({ input: inputValue });
+  };
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+    axios
+      .get(
+        `https://api.openweathermap.org/geo/1.0/direct?q=${this.state.input}&limit=1&appid=${process.env.REACT_APP_API_KEY}`
+      )
+      // City geo data is in response.data[0]
+      // Arrow functions with no curly braces return value after arrow
+      .then((response) => response.data[0])
+      .then((cityGeoData) =>
+        axios.get(
+          `https://api.openweathermap.org/data/2.5/weather?lat=${cityGeoData.lat}&lon=${cityGeoData.lon}&appid=${process.env.REACT_APP_API_KEY}&units=metric`
+        )
+      )
+      .then((response) => {
+        const { data: weatherData } = response;
+        this.setState({
+          weatherData: [...this.state.weatherData, weatherData],
+        });
+      });
+  };
+
   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>
+        <h1>Welcome to my weather app 🤠</h1>
+        <p>
+          Please type in any city's name into the input field below and click
+          "submit" to get the weather info 😉
+        </p>
+
+        <form>
+          <input
+            className="input-field"
+            type="text"
+            placeholder="enter the city name"
+            value={this.state.input}
+            onChange={this.handleChange}
+          ></input>
+          <input
+            className="button"
+            type="submit"
+            value="submit"
+            onClick={this.handleSubmit}
+          ></input>
+        </form>
+
+        {this.state.weatherData &&
+          this.state.weatherData.length > 0 &&
+          this.state.weatherData.map((location) => (
+            <div key={location.name}>
+              <h2>Current weather in {location.name}:</h2>
+              <img
+                src={`https://openweathermap.org/img/wn/${location.weather[0].icon}@2x.png`}
+                alt="icon"
+              />
+              <p>{location.weather[0].description}</p>
+
+              <p>Temperature: {Math.floor(location.main.temp)} °C</p>
+              <p>Feels like: {Math.floor(location.main.feels_like)} °C</p>
+              <p>Wind speed: {Math.floor(location.wind.speed)} m/sec</p>
+            </div>
+          ))}
       </div>
     );
   }