> For the complete documentation index, see [llms.txt](https://choubey.gitbook.io/react-coding-puzzles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://choubey.gitbook.io/react-coding-puzzles/26-weather-forecast-app-with-location-detection.md).

# 26 - Weather Forecast App with Location Detection

**Description:**

Create a React application that provides a weather forecast app with location detection. The app should automatically detect the user's location, allow users to manually enter a location if desired, fetch weather data from a weather API based on the chosen location, and display the current weather conditions, including temperature, humidity, wind speed, and weather description.

### **Algorithm**

1. Create a state variable to store the user's location and weather data.
2. Define a function to automatically detect the user's location using the Geolocation API.
3. Define a function to handle manual location input.
4. Define a function to fetch weather data from a weather API based on the chosen location.
5. Define a function to display the current weather conditions.
6. Render the weather forecast app interface.

### **Classes**

* `WeatherForecastApp`: A component that represents the weather forecast app interface.
* `LocationDetector`: A component that represents the location detection functionality.
* `WeatherDataFetcher`: A component that represents the weather data fetching functionality.
* `WeatherConditionsDisplay`: A component that represents the weather conditions display.

### **Code**

WeatherForecastApp.js

```javascript
import React, { useState, useEffect } from 'react';
import LocationDetector from './LocationDetector';
import WeatherDataFetcher from './WeatherDataFetcher';
import WeatherConditionsDisplay from './WeatherConditionsDisplay';

function WeatherForecastApp() {
  const [location, setLocation] = useState('');
  const [weatherData, setWeatherData] = useState({});

  useEffect(() => {
    const detectLocation = async () => {
      const userLocation = await LocationDetector.detectLocation();
      setLocation(userLocation);
    };
    detectLocation();
  }, []);

  const handleManualLocationInput = (location) => {
    setLocation(location);
  };

  const fetchWeatherData = async () => {
    const weatherData = await WeatherDataFetcher.fetchWeatherData(location);
    setWeatherData(weatherData);
  };

  useEffect(() => {
    fetchWeatherData();
  }, [location]);

  return (
    <div>
      <h2>Weather Forecast App</h2>
      <LocationDetector onLocationDetect={handleManualLocationInput} />
      <WeatherDataFetcher />
      <WeatherConditionsDisplay weatherData={weatherData} />
    </div>
  );
}

export default WeatherForecastApp;
```

LocationDetector.js

```javascript
import React from 'react';

function LocationDetector({ onLocationDetect }) {
  const handleDetectLocation = async () => {
    const userLocation = await navigator.geolocation.getCurrentPosition(
      (position) => {
        const latitude = position.coords.latitude;
        const longitude = position.coords.longitude;
        const location = `${latitude}, ${longitude}`;
        onLocationDetect(location);
      }
    );
  };

  return (
    <button onClick={handleDetectLocation}>
      Detect Location
    </button>
  );
}

export default LocationDetector;
```

WeatherDataFetcher.js

```javascript
import React from 'react';
import axios from 'axios';

function WeatherDataFetcher() {
  const fetchWeatherData = async (location) => {
    const apiURL = `<weather-url`>;
    const response = await axios.get(apiURL);
    const weatherData = response.data;
    return weatherData;
  };

  return <div />;
}

export default WeatherDataFetcher;
```

WeatherConditionsDisplay.js

```javascript
import React from 'react';

function WeatherConditionsDisplay({ weatherData }) {
  const temperature = weatherData.temp_c;
  const humidity = weatherData.humidity;
  const windSpeed = weatherData.wind_mph;
  const weatherDescription = weatherData.condition.text;

  return (
    <div>
      <h3>Current Weather Conditions</h3>
      <p>Temperature: {temperature}°C</p>
      <p>Humidity: {humidity}%</p>
      <p>Wind Speed: {windSpeed} mph</p>
      <p>Weather Description: {weatherDescription}</p>
    </div>
  );
}

export default WeatherConditionsDisplay;
```

### **Explanation**

The `WeatherForecastApp` component renders the weather forecast app interface. The `LocationDetector` component detects the user's location using the Geolocation API. The `WeatherDataFetcher` component fetches weather data from a weather API based on the chosen location. The `WeatherConditionsDisplay` component displays the current weather conditions.

### Possible Future Enhancements

* Add more weather data to the display, such as precipitation and UV index.
* Improve the user interface and user experience.
* Add support for multiple weather APIs.
* Allow users to save their favorite locations for quick access.
* Display weather forecasts for multiple days.