Weather App

Step 1: Set Up Your React Project

Open your terminal and run the following commands:

bashCopy codenpx create-react-app weather-app
cd weather-app

Step 2: Get Your API Key

1. Go to OpenWeatherMap and sign up for a free account.
2. After logging in, navigate to the API section and get your API key.

Step 3: Create the Weather App Component

Open src/App.js and replace its content with the following code:

javascriptCopy codeimport React, { useState } from 'react';
import './App.css';

const App = () => {
  const [city, setCity] = useState('');
  const [weather, setWeather] = useState(null);
  const [error, setError] = useState('');

  const API_KEY = 'YOUR_API_KEY'; // Replace with your OpenWeatherMap API key

  const handleInputChange = (e) => {
    setCity(e.target.value);
  };

  const fetchWeather = async () => {
    if (!city) return;

    try {
      const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`);
      if (!response.ok) {
        throw new Error('City not found');
      }
      const data = await response.json();
      setWeather(data);
      setError('');
    } catch (err) {
      setError(err.message);
      setWeather(null);
    }
  };

  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      fetchWeather();
    }
  };

  return (
    <div className="App">
      <h1>Weather App</h1>
      <input
        type="text"
        value={city}
        onChange={handleInputChange}
        onKeyPress={handleKeyPress}
        placeholder="Enter city name..."
      />
      <button onClick={fetchWeather}>Get Weather</button>

      {error && <p className="error">{error}</p>}
      
      {weather && (
        <div className="weather-info">
          <h2>{weather.name}</h2>
          <p>Temperature: {weather.main.temp} °C</p>
          <p>Weather: {weather.weather[0].description}</p>
          <p>Humidity: {weather.main.humidity} %</p>
          <p>Wind Speed: {weather.wind.speed} m/s</p>
        </div>
      )}
    </div>
  );
};

export default App;

Step 4: Style Your App

Open src/App.css and add some basic styles:

cssCopy code.App {
  text-align: center;
  margin: 20px;
  font-family: Arial, sans-serif;
}

input {
  padding: 10px;
  margin-right: 10px;
  width: 200px;
}

button {
  padding: 10px;
}

.weather-info {
  margin-top: 20px;
}

.error {
  color: red;
}

Step 5: Run Your Application

In the terminal, run:

bashCopy codenpm start