Request Forecast Data

Task

Request the five-day forecast using the coordinates returned by the current-weather response.

Open

Inside fetchWeather(), immediately after const current = await response.json();, add the forecast request.

Implementation

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

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

const forecast = await forecastResponse.json();
console.log(forecast);

The current response already contains latitude and longitude, so the forecast can request the exact same location. The forecast response contains list entries plus city.timezone, both of which are needed for the renderer.

Test

Search for a city and inspect forecast.list and forecast.city.timezone in DevTools. Remove the temporary log.

Expected result

The application retrieves current and forecast data for the same location.

Checkpoint

Before moving on, confirm the expected result in the running app and make sure the browser console has no blocking errors.