Fetch Forecast Data

Task

Use the coordinates from the current response to request the forecast.

File / section

src/App.jsx — inside loadWeather

Change

After the current response, create URLSearchParams({ lat: current.coord.lat, lon: current.coord.lon, appid: API_KEY, units: unit }), fetch ${API_BASE}/forecast?${forecastParams}, check forecastResponse.ok, parse JSON, and call setForecast(...).

Why this change matters

The forecast endpoint accepts coordinates, so the current response gives you the exact location to use.

Test it

Search a valid city and verify the browser network panel shows both /weather and /forecast requests.

Checkpoint

A successful city lookup now retrieves both current and forecast data.

const forecastParams = new URLSearchParams({
  lat: current.coord.lat,
  lon: current.coord.lon,
  appid: API_KEY,
  units: unit
});

const forecastResponse = await fetch(`${API_BASE}/forecast?${forecastParams}`);
if (!forecastResponse.ok) throw new Error("Could not load the forecast.");

const forecastData = await forecastResponse.json();
setWeather(current);
setForecast(forecastData);